Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana wartości w poszczególnych komórkach
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Barcelona
13.01.2012, 22:49:51
Witam, mam tabelkę oraz kod JS, dzięki któremu jestem w stanie zmienić wartości znajdujące się w komórkach. Jednak działa on na wszystkich komórkach. Chciałbym tą operację wykonywać na poszczególnych komórkach, np. o id:zmiana

Tabelka

[HTML] pobierz, plaintext 
  1. <table border="1" id="s" width="100%">
  2. <thead>
  3. <tr class="google-visualization-table-tr-head">
  4. <td class="sortowanie">Lp.</td>
  5. <td class="sortowanie">Nazwa</td>
  6. <td class="sortowanie"> Data dodania </td>
  7. <td class="sortowanie"> CENA PLN</td>
  8. <td class="sortowanie"> Firma </td>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr class="google-visualization-table-tr-odd">
  13. <td>1</td>
  14. <td>Telewizor Plazmowy</td>
  15. <td>23-04-2007</td>
  16. <td>8000</td>
  17. <td>Sony</td>
  18. </tr>
  19. <tr>
  20. <td>2</td>
  21. <td>Laptop</td>
  22. <td>24-04-2007</td>
  23. <td>3000</td>
  24. <td>Lenovo</td>
  25. </tr>
  26. <tr>
  27. <td>3</td>
  28. <td>Lodówka</td>
  29. <td>25-04-2007</td>
  30. <td>1100</td>
  31. <td>Polar</td>
  32. </tr>
  33. <tr>
  34. <td>4</td>
  35. <td>Monitor</td>
  36. <td>26-04-2007</td>
  37. <td>800</td>
  38. <td>Samsung</td>
  39. </tr>
  40. <tr>
  41. <td>5</td>
  42. <td>Odtwarzacz DVD</td>
  43. <td>27-05-2007</td>
  44. <td>838.44</td>
  45. <td>Sony</td>
  46. </tr>
  47. <tr>
  48. <td>6</td>
  49. <td>Odtwarzacz DVD</td>
  50. <td>28-05-2007</td>
  51. <td>838.99</td>
  52. <td>Panasonic</td>
  53. </tr>
  54. <tr>
  55. <td>7</td>
  56. <td>Płyta DVD-RW</td>
  57. <td>29-05-2007</td>
  58. <td>3.24</td>
  59. <td>Samsung</td>
  60. </tr>
  61. <tr>
  62. <td>8</td>
  63. <td>Płyta DVD-RW</td>
  64. <td>27-05-2007</td>
  65. <td>3.44</td>
  66. <td>Sony</td>
  67. </tr>
  68. <tr>
  69. <td>9</td>
  70. <td>Płyta DVD</td>
  71. <td>28-05-2007</td>
  72. <td>2.20</td>
  73. <td>Panasonic</td>
  74. </tr>
  75. <tr>
  76. <td>10</td>
  77. <td>Płyta DVD</td>
  78. <td>29-05-2007</td>
  79. <td>2.30</td>
  80. <td>Samsung</td>
  81. </tr>
  82. </tbody>
  83. </table>
[HTML] pobierz, plaintext


a to kod JS

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. onload=function()
  3.    {
  4.     for(var i=0,TR; TR=document.getElementsByTagName('tr')[i++];) //wiersze
  5.       {
  6.         for(var j=0,TD; TD=TR.getElementsByTagName('td')[j];j++) //kratki
  7. 	   {
  8.             if(TD.className=='sortowanie')
  9. 		{
  10.                   TD.numer=j; //nadawanie parametru numer
  11. 		  TD.klikniety=0;
  12.                   TD.onclick=function(){ klikniety(this); sort(this.numer,this);} //nadawanie akcji Onclick
  13. 		  TD.onmouseover=function(){ kolor(this,1) };
  14. 		  TD.onmouseout=function(){ kolor(this,2) };
  15.                 }
  16. 	    else
  17. 		{
  18. 		 TD.onclick=function() { zmien_wartosc(this); } //mozliwosc zmiany wartosci pola
  19. 	 	}
  20.            }
  21.        }
  22.    }
  23.  
  24. function kolor(obj,typ)
  25.  {
  26.   if(typ==1 && obj.klikniety==0);
  27.   if(typ==2 && obj.klikniety==0);
  28.  }
  29.  
  30. function zmien_wartosc(obj)
  31. 	{
  32. 	 if(confirm("Czy chcesz zmienic wartosc tego pola ? \r\n("+obj.innerHTML+") ?"))
  33. 	   {
  34. 	    var zmiana=prompt("Zmien wartosc tego pola z : "+obj.innerHTML,"");
  35. 	    if(zmiana=="") { alert("Pole nie uległo zmianie"); }
  36. 	    else
  37. 		{
  38. 		  alert("Wartosc usunieta : "+obj.innerHTML+"\r\nNowa wartosc : "+zmiana);
  39. 	 	  obj.innerHTML=zmiana;
  40. 		}
  41. 	   }
  42. 	}
  43.  
  44. var lastClick=new Object();
  45.  
  46. function klikniety(obj)
  47.  {
  48.   if(lastClick.klikniety==2 || (lastClick.klikniety==1 && obj.klikniety==0)){ lastClick.style.background="red"; lastClick.klikniety=0; }
  49.   if(obj.klikniety==1) { obj.style.background="lightblue"; obj.klikniety=2; obj.znak=1;}
  50.   if(obj.klikniety==0) { obj.style.background="blue"; obj.klikniety=1; obj.znak=-1; }
  51.   lastClick=obj;
  52.  }
  53.  
  54. function sort(numer,Obiekt)
  55.   {
  56.    // w ktorym kierunku ma sortowac od dolu czy od gory
  57.    (Obiekt.znak>0) ? (Obiekt.znak=-1) : (Obiekt.znak=1);
  58.    var TBODYobj=Obiekt.parentNode.parentNode.parentNode.getElementsByTagName('tbody')[0];
  59.    var c=new Array();
  60.    for(var i=0,TRobj; TRobj=TBODYobj.getElementsByTagName('tr')[i]; i++)
  61.       {
  62.         c[i]=[]; 						//pierwszy wymiar tablicy
  63.         for(var j=0;TDobj=TRobj.getElementsByTagName('td')[j];j++)
  64. 		   {
  65.       	     c[i][j]=TDobj.innerHTML; /*lub firstChild.data zamiast innerHTML*/;
  66.            }
  67.       }  
  68.  
  69.   /*po zmiennej numer poznaje kolumne ktora ma sortowac */
  70.   /*zmienna znak natomiast powoduje ze sortowanie moze byc ascending lub descending */
  71.  
  72.    c.sort( function (a,B){ return Sprawdz(a[numer],b[numer]) ? Obiekt.znak : (-Obiekt.znak) } );
  73.  
  74.  //sortowanie za pomoca zdefiniowanej funkcji
  75.    for(var i=0,TRobj;TRobj=TBODYobj.getElementsByTagName('tr')[i];i++)
  76.      {
  77.        for(var j=0;TDobj=TRobj.getElementsByTagName('td')[j];)
  78.           {
  79.             TDobj.innerHTML=c[i][j++]; /*lub firstChild.data zamiast innerHTML*/;
  80.           }
  81.      }
  82.   }
  83.  
  84. /* Uwaga Stosujac InnerHTML mozna spowodowac bledy w niektorych przegladarkach internetowych */
  85.  
  86. function Sprawdz(x,y) //funkcja sprawdzajaca czy element X ma byc nad elementem Y
  87. 	{
  88. 	 var r=/^[0-9\.]+$/i;
  89. 	 var HTMLreg=/<.*?>/i;
  90.  
  91. 	//-----usuwa kod HTML ze srodka tagow aby nie zaburzal sortowania
  92. 	 x+=''; y+='';
  93. 	 x=x.replace(HTMLreg,'');
  94. 	 y=y.replace(HTMLreg,'');
  95.  
  96. 	 //--- bierze pod uwage tylko znaki alfabetu i cyfry przy sortowaniu
  97.  
  98. 	 if(x.matchŸ && y.matchŸ) //sortowanie liczb
  99. 	   {
  100. 	     //document.write(x+' '+y);
  101. 	     if(parseFloat(x)>parseFloat(y)) return true;
  102. 	     else return false;
  103. 	   }
  104. 	 // sortowanie znakow
  105. 	 if (x>y) return true;
  106. 	 else return false;
  107. 	}
[JAVASCRIPT] pobierz, plaintext


Ok, już sobie odpowiadam smile.gif

[JAVASCRIPT] pobierz, plaintext 
  1. onload=function()
  2.    {
  3.     for(var i=0,TR; TR=document.getElementsByTagName('tr')[i++];) //wiersze
  4.       {
  5.         for(var j=0,TD; TD=TR.getElementsByTagName('td')[j];j++) //kratki
  6. 	   {
  7.             if(TD.className=='sortowanie')
  8. 		{
  9.                   TD.numer=j; //nadawanie parametru numer
  10. 		  TD.klikniety=0;
  11.                   TD.onclick=function(){ klikniety(this); sort(this.numer,this);} //nadawanie akcji Onclick
  12. 		  TD.onmouseover=function(){ kolor(this,1) };
  13. 		  TD.onmouseout=function(){ kolor(this,2) };
  14.                 }
  15. 	    else if(TD.className=='zmiana')
  16. 		{
  17. 		 TD.onclick=function() { zmien_wartosc(this); } //mozliwosc zmiany wartosci pola
  18. 	 	}
  19.            }
  20.        }
  21.    }
  22.  
  23. function kolor(obj,typ)
  24.  {
  25.   if(typ==1 && obj.klikniety==0);
  26.   if(typ==2 && obj.klikniety==0);
  27.  }
  28.  
  29. function zmien_wartosc(obj)
  30. 	{
  31. 	 if(confirm("Czy chcesz zmienic wartosc tego pola ? \r\n("+obj.innerHTML+") ?"))
  32. 	   {
  33. 	    var zmiana=prompt("Zmien wartosc tego pola z : "+obj.innerHTML,"");
  34. 	    if(zmiana=="") { alert("Pole nie uległo zmianie"); }
  35. 	    else
  36. 		{
  37. 		  alert("Wartosc usunieta : "+obj.innerHTML+"\r\nNowa wartosc : "+zmiana);
  38. 	 	  obj.innerHTML=zmiana;
  39. 		}
  40. 	   }
  41. 	}
  42.  
  43. var lastClick=new Object();
  44.  
  45. function klikniety(obj)
  46.  {
  47.   if(lastClick.klikniety==2 || (lastClick.klikniety==1 && obj.klikniety==0)){ lastClick.style.background="red"; lastClick.klikniety=0; }
  48.   if(obj.klikniety==1) { obj.style.background="lightblue"; obj.klikniety=2; obj.znak=1;}
  49.   if(obj.klikniety==0) { obj.style.background="blue"; obj.klikniety=1; obj.znak=-1; }
  50.   lastClick=obj;
  51.  }
  52.  
  53. function sort(numer,Obiekt)
  54.   {
  55.    // w ktorym kierunku ma sortowac od dolu czy od gory
  56.    (Obiekt.znak>0) ? (Obiekt.znak=-1) : (Obiekt.znak=1);
  57.    var TBODYobj=Obiekt.parentNode.parentNode.parentNode.getElementsByTagName('tbody')[0];
  58.    var c=new Array();
  59.    for(var i=0,TRobj; TRobj=TBODYobj.getElementsByTagName('tr')[i]; i++)
  60.       {
  61.         c[i]=[]; 						//pierwszy wymiar tablicy
  62.         for(var j=0;TDobj=TRobj.getElementsByTagName('td')[j];j++)
  63. 		   {
  64.       	     c[i][j]=TDobj.innerHTML; /*lub firstChild.data zamiast innerHTML*/;
  65.            }
  66.       }  
  67.  
  68.   /*po zmiennej numer poznaje kolumne ktora ma sortowac */
  69.   /*zmienna znak natomiast powoduje ze sortowanie moze byc ascending lub descending */
  70.  
  71.    c.sort( function (a,B){ return Sprawdz(a[numer],b[numer]) ? Obiekt.znak : (-Obiekt.znak) } );
  72.  
  73.  //sortowanie za pomoca zdefiniowanej funkcji
  74.    for(var i=0,TRobj;TRobj=TBODYobj.getElementsByTagName('tr')[i];i++)
  75.      {
  76.        for(var j=0;TDobj=TRobj.getElementsByTagName('td')[j];)
  77.           {
  78.             TDobj.innerHTML=c[i][j++]; /*lub firstChild.data zamiast innerHTML*/;
  79.           }
  80.      }
  81.   }
  82.  
  83. /* Uwaga Stosujac InnerHTML mozna spowodowac bledy w niektorych przegladarkach internetowych */
  84.  
  85. function Sprawdz(x,y) //funkcja sprawdzajaca czy element X ma byc nad elementem Y
  86. 	{
  87. 	 var r=/^[0-9\.]+$/i;
  88. 	 var HTMLreg=/<.*?>/i;
  89.  
  90. 	//-----usuwa kod HTML ze srodka tagow aby nie zaburzal sortowania
  91. 	 x+=''; y+='';
  92. 	 x=x.replace(HTMLreg,'');
  93. 	 y=y.replace(HTMLreg,'');
  94.  
  95. 	 //--- bierze pod uwage tylko znaki alfabetu i cyfry przy sortowaniu
  96.  
  97. 	 if(x.matchŸ && y.matchŸ) //sortowanie liczb
  98. 	   {
  99. 	     //document.write(x+' '+y);
  100. 	     if(parseFloat(x)>parseFloat(y)) return true;
  101. 	     else return false;
  102. 	   }
  103. 	 // sortowanie znakow
  104. 	 if (x>y) return true;
  105. 	 else return false;
  106. 	}
[JAVASCRIPT] pobierz, plaintext


A w tabeli w komórce gdzie ma być aktywna zmiana wartości trzeba nadać class="zmiana"

Proste smile.gif
krowal
14.01.2012, 11:10:54 
[JAVASCRIPT] pobierz, plaintext 
  1. var td = document.getElementById('zmiana');
  2. zmien_wartosc(td);
  3.  
  4. //w funkcji zmien_wartosc zmień:
  5. alert("Wartosc usunieta : "+obj.innerHTML+"\r\nNowa wartosc : "+zmiana);
  6. obj.innerHTML=zmiana;
  7. //w tym miejscu dodaj:
  8. obj.className += ' zmiana';
[JAVASCRIPT] pobierz, plaintext

O to chodziło ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.