使用jquery在具有行跨度的表中启用文本框
我陷入了一个问题，我有以下html结构。 最初，所有文本框都被禁用。使用jquery在具有行跨度的表中启用文本框,jquery,Jquery,我陷入了一个问题，我有以下html结构。 最初，所有文本框都被禁用。 当我勾选第一列中的某些复选框时，我想启用此行中的文本框。 问题是我可以启用除“Tag 02”之外的所有文本框。 我相信在第2行中有一个“rowspan=2”，所以我的代码在tag02行中找不到td。 我把我的代码贴在下面，有人能帮我解决这个问题吗？ 非常感谢 <html> <body> <table border="1" id="settbl" cellspacing="0" cellpaddi
当我勾选第一列中的某些复选框时，我想启用此行中的文本框。 问题是我可以启用除“Tag 02”之外的所有文本框。 我相信在第2行中有一个“rowspan=2”，所以我的代码在tag02行中找不到td。 我把我的代码贴在下面，有人能帮我解决这个问题吗？ 非常感谢
<html>
<body>
<table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text"/></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td rowspan="2"><input type="checkbox"/></td>
<td rowspan="2">Row2</td>
<td>Tag 01</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td>Tag 02</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
</tbody>
</table>
</body>
</html>
您正在使用$（'#settbl tr'）.filter（':has（：checkbox:checked）'）进行搜索，这意味着它将返回选中复选框的
<tr>
<td rowspan="2"><input type="checkbox"/></td>
<td rowspan="2">Row2</td>
<td>Tag 01</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td>Tag 02</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
第2行
标签01
单位
标签02
单位
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function enableRows() {
$('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
$(this).find('input[type=text],select').each(function() {
this.disabled = false;
});
});
}
</script>
</head>
<body>
<table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text" disabled /></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td ><input type="checkbox"/></td>
<td >
<table>
<tr>
<td>
Row2
</td>
<tr>
</tr>
<td>
Row2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Tag 01
</td>
<tr>
</tr>
<td>
Tag 02
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" disabled /></td>
</td>
<tr>
</tr>
<td>
<input type="text" disabled /></td>
</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>
<td>Units</td>
</td>
<tr>
</tr>
<td>
<td>Units</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text" disabled /></td>
<td>Units</td>
</tr>
</tbody>
</table>
<button onclick="enableRows();">Enable Rows</button>
</body>
</html>
函数enableRows（）{
$（'#settbl tr'）。筛选器（':has（：复选框：选中）'）。每个（函数（）{
$（this）.find（'input[type=text]，select'）。each（function（）{
this.disabled=false；
});
});
}
背景
价值
单位
第1行
单位
编辑
第2行
第2行
标签01
标签02
单位
单位
第3行
单位
启用行
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function enableRows() {
$('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
$(this).find('input[type=text],select').each(function() {
this.disabled = false;
});
});
}
</script>
</head>
<body>
<table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text" disabled /></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td ><input type="checkbox"/></td>
<td >
<table>
<tr>
<td>
Row2
</td>
<tr>
</tr>
<td>
Row2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Tag 01
</td>
<tr>
</tr>
<td>
Tag 02
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" disabled /></td>
</td>
<tr>
</tr>
<td>
<input type="text" disabled /></td>
</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>
<td>Units</td>
</td>
<tr>
</tr>
<td>
<td>Units</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text" disabled /></td>
<td>Units</td>
</tr>
</tbody>
</table>
<button onclick="enableRows();">Enable Rows</button>
</body>
</html>