我想在td元素内的第4 tr个table动态添加<div>，但它没有添加。
我的代码是：
$(document).ready(function() {
$("table>tbody>tr>tr>tr>tr>div>table>tbody>tr>").each(function() {
var code_cell = $(this).find("td:eq(0)");
var cell = "<td>Hey I am Added here</td>";
code_cell.before(cell);
});
});<table>
<tbody>
<tr>
<td valign="top">
1st tr and it's td
</td>
</tr>
<tr>
<td valign="top">
2nd tr and it's td
</td>
</tr>
<tr>
<td>
3rd tr and it's td
</td>
</tr>
<tr>
<td>
4th tr and it's td
<span>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
4th tr first table tr and it's td
</tr>
</thead>
<tbody>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 1st table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
4th tr second table tr and it's td
<th ></th>
<th ></th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 2nd table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
</span>
<div>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
4th tr table tr 3rd table tr and it's td
<b>Dynamically Add here instead of it</b>
</td>
<td>
<b>This is fixed td</b>
</td>
</tbody>
</table>
</div>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td>
Test
</td>
</tr>
</tbody>
</table>
您能否通过我正确的方向来实现上述功能。
答案 0 :(得分：1)
问题是你的选择器。 >用于查找孩子，而不是兄弟姐妹。尝试使用:nth-child()。
$(document).ready(function() {
$("table > tbody > tr:nth-child(4) div > table > tbody > tr ").each(function() {
var code_cell = $(this).find("td:eq(0)");
var cell = "<td>Hey I am Added here</td>";
code_cell.before(cell);
// If you're trying to replace the existing td, use the below
// code_cell.html(cell);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td valign="top">
1st tr and it's td
</td>
</tr>
<tr>
<td valign="top">
2nd tr and it's td
</td>
</tr>
<tr>
<td>
3rd tr and it's td
</td>
</tr>
<tr>
<td>
4th tr and it's td
<span>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
4th tr first table tr and it's td
</tr>
</thead>
<tbody>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 1st table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
4th tr second table tr and it's td
<th ></th>
<th ></th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 2nd table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
</span>
<div>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
4th tr table tr 3rd table tr and it's td
<b>Dynamically Add here instead of it</b>
</td>
<td>
<b>This is fixed td</b>
</td>
</tbody>
</table>
</div>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td>
Test
</td>
</tr>
</tbody>
</table>
答案 1 :(得分：1)
您没有使用正确的层次结构进行选择。
$("table>tbody tr:gt(3) table:gt(2) tr").each(function() {
var code_cell = $(this).find("td:eq(0)");
var cell = "<td>Hey I am Added here</td>";
code_cell.before(cell);
});
答案 2 :(得分：1)
我不确定是否正确解释了4th tr 3rd table的含义，但是，您是否已经尝试过这个表达式$('tr div table').parent()？
jQuery(document).ready(function($) {
var target = $('tr div table').parent();
var content = '<h1>Hello World</h1>';
target.html(content)
});table {
border: 1px;
}
tr:nth-child(even) { background: yellow; }
tr:nth-child(odd) { background: pink; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td valign="top">
1st tr and it's td
</td>
</tr>
<tr>
<td valign="top">
2nd tr and it's td
</td>
</tr>
<tr>
<td>
3rd tr and it's td
</td>
</tr>
<tr>
<td>
4th tr and it's td
<span>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
4th tr first table tr and it's td
</tr>
</thead>
<tbody>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 1st table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
4th tr second table tr and it's td
<th ></th>
<th ></th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 2nd table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
</span>
<div>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
4th tr table tr 3rd table tr and it's td
<b>Dynamically Add here instead of it</b>
</td>
<td>
<b>This is fixed td</b>
</td>
</tbody>
</table>
</div>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td>
Test
</td>
</tr>
</tbody>
</table>
答案 3 :(得分：1)
The problem is your selector is wrong。您可以使用css nth-child property（请参阅此 link for details）在以下codepen link或此codepen link 2之类的选择器中使用它，如果您希望将其添加到文本“动态添加”这里....“写的。
$(document).ready(function() {
$("table tbody tr:nth-child(4) div > table > tbody > tr ").each(function() {
var code_cell = $(this).find("td:eq(0)");
var cell = "<td>Hey I am Added here</td>";
code_cell.before(cell);
});
});table {
border: 1px;
}
tr:nth-child(odd) { background: #ddd; }
tr:nth-child(even) { background: #aaa; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td valign="top">
1st tr and it's td
</td>
</tr>
<tr>
<td valign="top">
2nd tr and it's td
</td>
</tr>
<tr>
<td>
3rd tr and it's td
</td>
</tr>
<tr>
<td>
4th tr and it's td
<span>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
4th tr first table tr and it's td
</tr>
</thead>
<tbody>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 1st table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
4th tr second table tr and it's td
<th ></th>
<th ></th>
<th ></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table style="width:100%">
<tbody>
<tr>
<td>
4th tr table tr 2nd table tr and it's td
</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td >
</td>
</tr>
</tbody>
</table>
<br>
</span>
<div>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
4th tr table tr 3rd table tr and it's td
<b>Dynamically Add here instead of it</b>
</td>
<td>
<b>This is fixed td</b>
</td>
</tbody>
</table>
</div>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td>
Test
</td>
</tr>
</tbody>
</table>