JavaScript - cant understand this line of code, plz guide me

Asked By Haansi Haansi on 19-Aug-10 02:45 AM

thanks for your attention and time.

I m modifying an existing JavaScript but cant understand a line of code. Please help me understanding this line.

 rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;

I am clear till .getElementsByTagName('td') , sortOn is being passed in this function as a parameter. But couldn't understand [sortOn].firstChild.nodeValue;

Please guide me,

Naresh Kumar replied to Haansi Haansi on 19-Aug-10 03:13 AM
Have a look into this

Anand Malli replied to Haansi Haansi on 19-Aug-10 03:22 AM
HI Haansi,

to make you understand this statement i need the data which you are using inside td,i mean innerHTML of your TD,because your code is doing that only,but for now i will take one sample and will explain,see the line below

<td>this is test</td>

no your javascript if getting but the td from the array of TD i.e td[sortOn] and now,the in our example our td's first child is the string content and its value is "This is test" this content would be return as nodeValue is used,there is also property called nodeType which may result in "#text"

so the "nodeValue" property is a read/write property that reflects the current value of a node. For text nodes, the content of the node is returned, while for attribute nodes, the attribute value. Null is returned for Document and element nodes. Use this property to alter the contents of a text or attribute node.

let me know
Shunmuga Nathan replied to Haansi Haansi on 19-Aug-10 03:28 AM
rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;

1. Here you are getting all the Tags having name "td".
   So you have set of records of "td"
2. You are going to sort the record by its id, or any other property.
3. Then you are getting the top most (firstChild) value
Mash B replied to Haansi Haansi on 19-Aug-10 03:42 AM
 Suppose your tabe is structured like below
to aceess the first td  value u need to use below code

Goniey N (Mr. G) replied to Haansi Haansi on 19-Aug-10 08:19 AM
//When You Ask Something Then Post Your Problem Like This Way So Other Can Help You, Otherwise It's Very Difficult To Solve Your Problem..

//I Found Code For You From

Code looks Like Below :

  1. <script type="text/javascript">  
  2. var sortedOn = 0;  
  4. function SortTable(sortOn) {  
  6. var table = document.getElementById('results');  
  7. var tbody = table.getElementsByTagName('tbody')[0];  
  8. var rows = tbody.getElementsByTagName('tr');  
  10. var rowArray = new Array();  
  11. for (var i=0, length=rows.length; i<length; i++) {  
  12. rowArray[i] = new Object;  
  13. rowArray[i].oldIndex = i;  
  14. rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;  
  15. }  
  17. if (sortOn == sortedOn) { rowArray.reverse(); }  
  18. else {  
  19. sortedOn = sortOn;  
  20. /* 
  21. Decide which function to use from the three:RowCompareNumbers, 
  22. RowCompareDollars or RowCompare (default). 
  23. For first column, I needed numeric comparison. 
  24. */  
  25. if (sortedOn == 0) {  
  26. rowArray.sort(RowCompareNumbers);  
  27. }  
  28. else {  
  29. rowArray.sort(RowCompare);  
  30. }  
  31. }  
  33. var newTbody = document.createElement('tbody');  
  34. for (var i=0, length=rowArray.length ; i<length; i++) {  
  35. newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));  
  36. }  
  38. table.replaceChild(newTbody, tbody);  
  39. }  
  41. function RowCompare(a, b) {   
  43. var aVal = a.value;  
  44. var bVal = b.value;  
  45. return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));  
  46. }  
  47. // Compare number  
  48. function RowCompareNumbers(a, b) {  
  50. var aVal = parseInt( a.value);  
  51. var bVal = parseInt(b.value);  
  52. return (aVal - bVal);  
  53. }  
  54. // compare currency  
  55. function RowCompareDollars(a, b) {  
  57. var aVal = parseFloat(a.value.substr(1));  
  58. var bVal = parseFloat(b.value.substr(1));  
  59. return (aVal - bVal);  
  60. }  
  61. </script>

HTML Code :

<table id="results">
<a onclick="SortTable(0);" href="javascript:;">Position Jun 07</a>
<a onclick="SortTable(1);" href="javascript:;">Position Jun 06</a>
<a onclick="SortTable(2);" href="javascript:;">Porg. Language</a>
<td >1</td>
<td >3</td>  
<td >3</td>   
<td>C++ </td
<br />

.getElementsByTagName('td') - returns a list of TD elements.
.getElementsByTagName('td')[sortOn] - fetches a single element from that list, Which Is Passed In The sortOn Variable. Here sortOn Is Variable Whoch Passed As Argument In The Function...(See Above Given Code)

.firstChild - returns the first element that is positioned inside this TD.

.nodeValue - Returns or sets the value of the current node.

Hope This Helps You.....