jQuery代码：从parent到child;不是从孩子到父母 [英] jQuery Code: Starting from Parent to Child; not from Child to Parent
本文介绍了jQuery代码：从parent到child;不是从孩子到父母的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下HTML表格。在每行的最后一列有三个按钮。当点击视图按钮时，我需要获取相应行的消费者ID。我有以下jQuery代码。 http://jsfiddle.net/Lijo/nUbB2/
I have the following HTML table. In the last column of each row there are three buttons. When view button is clicked, I need to get the consumer ID of the corresponding row. I have the following jQuery code. http://jsfiddle.net/Lijo/nUbB2/
1）有更好的jQuery代码吗？
1) Is there a better jQuery code?
2）目前我首先找到按钮，然后是父行，然后是Consumer ID列。有没有办法从行开始，然后分别找到按钮和Consumer ID列？
2) Currently I am first finding the button – then its parent row – then the Consumer ID column. Is there a way to start from the row and then find the button and Consumer ID column respectively?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.resultGridTable tr > td > .actionButtonView').click(function () {
//TRaversing to get the parent row and then the required columns in the row
var consumerID = $(this).parents('tr:first').find('td:first').text();
var consumerName = $(this).parents('tr:first').find('td:nth-child(2)').text();
var configID = $(this).parents('tr:first').find('td:nth-child(5)').text();
alert(consumerID + "," + consumerName + "," + configID);
//window.location.href("SubscribedAssociates.aspx?ConsumerID=" + consumerID + "&consumerName=" + consumerName + "&configID=" + configID);
return false;
});
});
</script>
</head>
<body>
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdConsumers"
style="border-collapse: collapse;">
<thead>
<tr>
<th scope="col">
<a>Consumer ID</a>
</th>
<th scope="col">
<a>Consumer Name</a>
</th>
<th scope="col">
<a>Consumer URL</a>
</th>
<th scope="col">
<a>Status</a>
</th>
<th scope="col">
<a>Config ID</a>
</th>
<th scope="col">
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="SubscribedAssociates.aspx?ConsumerID=101">101</a>
</td>
<td>
Consumer1
</td>
<td>
http://Consumer1.compnay.com/wps/payroll
</td>
<td>
Active
</td>
<td>
101
</td>
<td>
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnView"
value="VIEW" id="detailContentPlaceholder_grdConsumers_btnView_0" class="actionButtonView"
style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnEdit"
value="EDIT" id="detailContentPlaceholder_grdConsumers_btnEdit_0" class="actionButtonEdit"
style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnDelete"
value="DELETE" id="detailContentPlaceholder_grdConsumers_btnDelete_0" class="actionButtonDelete"
style="color: White; background-color: Orange; font-weight: bold; width: 45px" />
</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
<a href="SubscribedAssociates.aspx?ConsumerID=102">102</a>
</td>
<td>
Consumer2
</td>
<td>
http://Consumer2.compnay.com/prd/sap/operations
</td>
<td>
Active
</td>
<td>
102
</td>
<td>
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnView"
value="VIEW" id="detailContentPlaceholder_grdConsumers_btnView_1" class="actionButtonView"
style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnEdit"
value="EDIT" id="detailContentPlaceholder_grdConsumers_btnEdit_1" class="actionButtonEdit"
style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
<input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnDelete"
value="DELETE" id="detailContentPlaceholder_grdConsumers_btnDelete_1" class="actionButtonDelete"
style="color: White; background-color: Orange; font-weight: bold; width: 45px" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
你需要做一些遍历，可以通过缓存行来减少...
You'll need to do some traversal, but you can reduce it by caching the row...
var row = $(this).closest('tr')[0],
consumerID = $(row.cells[0]).text(),
consumerName = $(row.cells[1]).text(),
configID = $(row.cells[4]).text();
我也直接使用DOM元素来获取子行。
I also used the DOM element directly to get the child row.
这篇关于jQuery代码：从parent到child;不是从孩子到父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
