gpt4 book ai didi

jquery - 使用 jquery 启用表格中带有 rowspan 的文本框

转载 作者:行者123 更新时间:2023-12-01 05:53:56 26 4
gpt4 key购买 nike

我遇到了一个问题,我有以下 html 结构。最初,所有文本框均被禁用。
当我勾选第一列中的某个复选框时,我想启用此行中的文本框。问题是我可以启用除“Tag 02”之外的所有文本框。我相信 row2 中有一个“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>&nbsp;</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>

我的代码在这里:

function enableRows(){
$('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
$(this).find('input[type=text],select').each(function() {
this.disabled = false;//only enable "Row1","Row2->Tag01" and "Row3".
});
});

}

最佳答案

您正在使用 $('#settbl tr').filter(':has(:checkbox:checked)') 进行搜索,这意味着它将返回 <tr>选中一个复选框。但在您的代码中,您可以看到 Tag02 的父级 <tr>甚至没有复选框。你应该把 <input>您想要在同一个<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>

您可以尝试此代码。

<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>&nbsp;</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>

关于jquery - 使用 jquery 启用表格中带有 rowspan 的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18123469/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com