html代码
<table class="fruits" border="1">
<tr>
<td>Apple</td>
<td>$2.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Apple</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Pineapple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>$3.20</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Watermelon</td>
</tr>
<tr>
<td>Orange</td>
<td>$1.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Orange</td>
</tr>
的jQuery
var table = $("table");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
fruit = $tds.eq(0).text(),
buy = $tds.eq(3).text()
alert(fruit +" "+ buy);
});
我想单击按钮并选择第1列和第4列中的项目,但这是另一个嵌套表,因此在jQuery中编码会给我错误的信息。任何人都可以在下面帮我jQuery?
答案 0 :(得分:1)
以下方法基于“积极思考”:不是排除内部表,而是仅包括外部表和正确的元素:
$("table.fruits > tbody > tr")
.each(function (i) {
var $tds = $(this).children('td'),
fruit = $tds.eq(0).text(),
buy = $tds.eq(3).text()
console.log(fruit +" "+ buy);
});
如果表格中可能包含thead
元素,则可能需要修改代码。
这个简单版本只选择选择器table.fruits > tbody > tr
的外部表的所有行(但不是任何内部表的任何行)。在DOM中,tr
元素不会显示为table
但tbody
(或thead
)的子项,即使未使用<tbody>
标记也是如此。< / p>
处理行时,最好使用children()
方法,该方法只选择直接后代(子项)。
答案 1 :(得分:0)
在所有tr中写class =“f1”(你可以签入html)。工作代码在下面。
<script>
$(document).ready(function() {
var table = $("table.fruits");
table.find('tr.f1').each(function (i) { //this will find only tr which have class f1 not nested table .
var $tdsfirst = $(this).find('td:first');// find first td
var $tdslast = $(this).find('td:last'); //find last td
fruit = $tdsfirst.text();
buy = $tdslast.text();
alert(fruit +" "+ buy);
});
} );
</script>
<table class="fruits" border="1">
<tr class="f1">
<td>Apple</td>
<td>$2.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Apple</td>
</tr>
<tr class="f1">
<td>Pineapple</td>
<td>$2.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Pineapple</td>
</tr>
<tr class="f1">
<td>Watermelon</td>
<td>$3.20</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Watermelon</td>
</tr>
<tr class="f1">
<td>Orange</td>
<td>$1.50</td>
<td>
<table>
<tr><td>Nice</td></tr>
<tr><td>Cheap</td></tr>
</table>
</td>
<td>Buy Orange</td>
</tr>
</table>
答案 2 :(得分:0)
我有一个解决方案,不需要在HTML中添加类。它主要依赖于not()
选择器。
JSFiddle:http://jsfiddle.net/kdNng/
$("table.fruits tr").not("table table tr").each(function ()
{
var tds = $(this).children('td');
var fruit = tds.eq(0).text();
var buy = tds.eq(3).text();
alert(fruit +" "+ buy);
});