Question

我可以从我的行中获取第一个和最后一个值但是不能得到我的行的第二个和第三个值。谁能帮我。

这是我的代码

=＆GT; HTML

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

=＆GT;的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);
}

谢谢。

Answer 1

使用nth-child(n)方法

示例

$(".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

您可以使用eq(index)通过使用其索引从td获取值。 Index从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);
    });

如果你想获取div中的特定元素，那么使用classname你可以这样做

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

如果您想访问每个表数据，只需循环访问您的td。

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

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

在旁注中，您可以将evt.target替换为this

Answer 5

我认为在没有jQuery的情况下获取此值更容易。使用HTMLTableRowElement.cells DOM属性。这几乎就像一个数组，但不是数组。

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

如果您仍然需要jQuery，那么您可以使用.eq()方法代替.first()和.last()方法。

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

Ajax基于行获取表值

5 个答案: