Ajax get table value based on row

Question

I can get first and last value from my row but can`t get the second and third value of my row. can anyone help me.

this my code

=> Html

<tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td><button class="btnDelete">Delete</button></td>  
</tr>

=> javascript

$(".btnDelete").click(function (evt) {
   var cell=$(evt.target).closest("tr").children().first();
   var cell2=$(evt.target).closest("tr").children().last();
   var custID=cell.text();
   var custID2=cell2.text();
   alert(custID);
   alert(custID2);
}

thanks .

Answer 1

Use nth-child(n) method

Example

  $(".btnDelete").click(function (evt) { var cell2 = $(evt.target).parent().parent("tr").find("td:nth-child(2)").text(); var cell3 = $(evt.target).parent().parent("tr").find("td:nth-child(3)").text(); console.log("cell 2 : "+cell2+", cell 3 : "+cell3); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>one</td> <td>two</td> <td>three</td> <td>four</td> <td><button class="btnDelete">Delete</button></td> </tr> </table> 

Answer 2

You can use eq(index) to get the value from td by using its index. Index starts from 0

alert($(evt.target).closest("tr").children('td:eq(2)').text());   //get value from 3rd `td`

Answer 3

 $("#myTable").on('click','.btnDelete',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 

         var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
         var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
         var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
         var data=col1+"\n"+col2+"\n"+col3;

         alert(data);
    });

---

If you want to fetch specific element inside div, then with classname you can do like this

$("#myTable").on('click','.btnDelete',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 

         var col1=currentRow.find(".classOne").html(); // get current row 1st table cell TD value
         var col2=currentRow.find(".classTwo").html(); // get current row 2nd table cell TD value
         var col3=currentRow.find(".classThree").html(); // get current row 3rd table cell  TD value
         var data=col1+"\n"+col2+"\n"+col3;

         alert(data);
    });

Complete Tutorial: How to get table cell td value in Jquery

Answer 4

If you would like to access every table data, just loop through your td's.

var cells = [];
$(evt.target).closest("tr").children().each(function(key, cell){
  cells.push(cell);

  alert($(cell).text());
});

---

On a side note, you can replace evt.target by this

Answer 5

I think it's easier to get this values without jQuery. By using HTMLTableRowElement.cells DOM property. Which is almost like an array, but not an array.

$("#myTable").on('click','.btnDelete',function(){
     // get the current row
     var currentRow = $(this).closest("tr")[0]; 
     var cells = currentRow.cells;

     var firstCell = cells[0].textContent;
     var secondCell = cells[1].textContent;

     //...
     //nthCell = cells[n-1].textContent;
     console.log( firstCell );
     console.log( secondCell );
});

If you still want jQuery, then instead of .first() and .last() methods, you could use .eq() method.

 var rowCells = $(this).closest("tr").children(); 
 var firstCell = rowCells.eq( 0 ).text();
 var secondCell = rowCells.eq( 1 ).text();