CODEWITHSUNDEEP
javascripthtml
amor
amor

Reputation: 45

Ajax get table value based on row

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 .

Upvotes: 2

Views: 7350

Answers (5)

Satinder singh
Satinder singh

Reputation: 10208

 $("#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);
    });

Upvotes: 1

Arnial
Arnial

Reputation: 1441

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();

Upvotes: 1

Alexis
Alexis

Reputation: 5831

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>

Upvotes: 1

kockburn
kockburn

Reputation: 17626

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

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

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`

Upvotes: 1

Related Questions