Unable to retieve the particular value of cell on table using javascript

Question

I am using the following code to retrieve the values of a particular cell of a table.:

function addCatAttr()
{
   var tbl = document.getElementById("tblAttributes1");
   if (tbl.rows.length > 1)
   {
       for ( var i = 1 ; i < tbl.rows.length ; i++ )
       {
           var r = tbl.rows[i];
           var catname1 =r.cells[0].document.getElementsByTagName("input").item(1).value;
           var lifecycycleattr1 = r.cells[0].document.getElementsByTagName("input").item(2).value;
           var stateattr1 = r.cells[0].document.getElementsByTagName("input").item(3).value;

        }
    }
}

and my html code is :

<table id="tblAttributes1">
    <tr>
        <td>Category</td>
        <td>Life Cycle Attribute</td>
        <td>State Attribute</td>
    </tr>
    <tr>
        <td>cat1</td>
        <td>pf</td>
        <td>state</td>
    </tr>
</table>

I want to retrieve each value of a particular.

Its just an example.I have more thane two rows for which i need for loop to get the values of each cell.

Answer 1

See if this points you in the right direction:

 function addCatAttr() { var tbl = document.getElementById("tblAttributes1"); if (tbl.rows.length > 1) { for ( var i = 1 ; i < tbl.rows.length ; i++ ) { var r = tbl.rows[i]; var catname1 =r.cells[0].innerText; var lifecycycleattr1 = r.cells[1].innerText; var stateattr1 = r.cells[2].innerText; alert('catname1: ' + catname1 + '\\r\\n' + 'lifecycycleattr1: ' + lifecycycleattr1 + '\\r\\n' + 'stateattr1: ' + stateattr1 + '\\r\\n'); } } } 

 <table id="tblAttributes1"> <tr> <td>Category</td> <td>Life Cycle Attribute</td> <td>State Attribute</td> </tr> <tr> <td>cat1</td> <td>pf</td> <td>state</td> </tr> </table> <input type="button" onclick="addCatAttr()" value="Click me" /> 

Answer 2

This can help better...

function addCatAttr()
{
   var tbl = document.getElementById("tblAttributes1");
   if (tbl.rows.length > 1)
   {
       for ( var i = 1 ; i < tbl.rows.length ; i++ )
       {
           var r = tbl.rows[i];
           var catname1 =r.cells[0].innerHTML;
           var lifecycycleattr1 = r.cells[1].innerHTML;
           var stateattr1 = r.cells[2].innerHTML;

           alert('catname1: ' + catname1 + '\r\n' +
                 'lifecycycleattr1: ' + lifecycycleattr1 + '\r\n' +
                 'stateattr1: ' + stateattr1 + '\r\n');
        }
    }
}



<table id="tblAttributes1">
    <tr>
        <td>Category</td>
        <td>Life Cycle Attribute</td>
        <td>State Attribute</td>
    </tr>
    <tr>
        <td>cat1</td>
        <td>pf</td>
        <td>state</td>
    </tr>
</table>

<input type="button" onclick="addCatAttr()" value="Click me" />

Answer 3

You need to apply two for loops one for table length and the other for the each td in tr. This is the code.

var table = document.getElementById('tblAttributes1'), rows = table.getElementsByTagName('tr');

for (var i = 0; i< rows.length; i++) {

var tds = rows[i].getElementsByTagName('td');
for(var x=0;x<tds.length;x++){
    console.log(tds[x].innerHTML);
 }

And the fiddle is- http://jsfiddle.net/09q6n3m2/16/