[英]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 => HTML
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
=> javascript => 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 . 谢谢 。
Use nth-child(n)
method 使用
nth-child(n)
方法
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>
You can use eq(index)
to get the value from td
by using its index. 您可以使用
eq(index)
通过其索引从td
获取值。 Index
starts from 0
Index
从0
开始
alert($(evt.target).closest("tr").children('td:eq(2)').text()); //get value from 3rd `td`
$("#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 如果要在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 完整教程:如何在Jquery中获取表单元格td值
If you would like to access every table data, just loop through your td's. 如果要访问每个表数据,只需遍历td即可。
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
附带一提,您可以将
evt.target
替换this
I think it's easier to get this values without jQuery. 我认为在没有jQuery的情况下获取此值会更容易。 By using HTMLTableRowElement.cells DOM property.
通过使用HTMLTableRowElement.cells DOM属性。 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. 如果你仍然想jQuery的,然后代替
.first()
和.last()
方法,你可以使用.eq()
方法。
var rowCells = $(this).closest("tr").children();
var firstCell = rowCells.eq( 0 ).text();
var secondCell = rowCells.eq( 1 ).text();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.