How to fetch td value which checkbox is checked in the same row

Question

In my project, I use table.

My html code is :

 <table id="assTB" border="1px" cellspacing="0">
       <colgroup>
       <col style="width:15%">
       <col style="width:15%">
       <col style="width:70%">
       </colgroup>
       <tbody>
       <tr style="height:35px">
      <td   bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td>
       <td   bgcolor="#CDCDCD"><b>id</b></td>
       <td   bgcolor="#CDCDCD"><b>name</b></td>
       </tr>
       </tbody>
       <tr>
       <td><b><input type='checkbox'></b></td>
       <td>1</td>
       <td>Tom</td>
       </tr>    
       <tr>
       <td><b><input type='checkbox'></b></td>
       <td>2</td>
       <td>John</td>
       </tr>
   </table>
  <input type="button" onclick="selAtt()">

My js code is:

function selAtt()
{
    var xzyId=document.getElementById("assTB");//tableID
    var checked=xzyId.getElementsByTagName("input");//checkbox


    var names = [];

    for(i=1;i<checked.length;i++)
    {
      if(checked[i].checked)
      {
        //rete=checked[i].parentNode.parentNode;//works fail
        //rete=checked[i].closest("tr");//works fail
        //rete=checked[i].parent().prev();//works fail
        rete = checked[i].parent().prev();//works fail
        var stNum=rete.find("td:eq(2)").text();
        names.push(stNum);
      }
    }

    for(i=0;i<names.length;i++)
    {
        alert(names[i]);
    }
    }
}

Now I want to fetch name when checkbox is checked in the same row.

I have tried four methods to fetch rete as in above code.

But unlucky, they are all fail. Who can help me ?

Answer 1

1. Use map() to add in array
2. Use :checked to select only checked checkbox
3. Use :nth-child to get the desired td (:nth-child index starts with 1)

 $("#button").click(function() { var arr = $(':checkbox:checked').map(function() { var tr = $(this).closest('tr'); var obj = {}; obj['id'] = tr.find('td:nth-child(2)').text(); obj['name'] = tr.find('td:nth-child(3)').text(); return obj; }).get(); console.log(arr) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="assTB" border="1px" cellspacing="0"> <colgroup> <col style="width:15%"> <col style="width:15%"> <col style="width:70%"> </colgroup> <tbody> <tr style="height:35px"> <td bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td> <td bgcolor="#CDCDCD"><b>id</b></td> <td bgcolor="#CDCDCD"><b>name</b></td> </tr> </tbody> <tr> <td><b><input type='checkbox'></b></td> <td>1</td> <td>Tom</td> </tr> <tr> <td><b><input type='checkbox'></b></td> <td>2</td> <td>John</td> </tr> </table> <input type="button" value="button" id="button"> 

For name only :

 $("#button").click(function() { var arr = $(':checkbox:checked').map(function() { var tr = $(this).closest('tr'); return tr.find('td:nth-child(3)').text(); }).get(); console.log(arr) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="assTB" border="1px" cellspacing="0"> <colgroup> <col style="width:15%"> <col style="width:15%"> <col style="width:70%"> </colgroup> <tbody> <tr style="height:35px"> <td bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td> <td bgcolor="#CDCDCD"><b>id</b></td> <td bgcolor="#CDCDCD"><b>name</b></td> </tr> </tbody> <tr> <td><b><input type='checkbox'></b></td> <td>1</td> <td>Tom</td> </tr> <tr> <td><b><input type='checkbox'></b></td> <td>2</td> <td>John</td> </tr> </table> <input type="button" value="button" id="button">