javascript - 选择每个不同类的第一个兄弟
问题描述
$('.editbtn3').click(function() {
var edit = $(this).text().trim() == 'Edit';
$(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
var $rows = $("tr.set" + $(this).data("set"));
$rows.each(function() {
var index = $(this).index();
if(index==0)
{
var tdSet = $(this).find($("td").not('td:first-child').not('td:nth-child(2)').not('td:nth-child(3)').not(':last-child'));
}
else
var tdSet=$(this).find($("td"));
tdSet.each(function() {
if (edit) {
$(this).prop('contenteditable', true).css({
'background': '#fff',
'color': '#000'
})
} else {
$(this).prop('contenteditable', false).removeAttr("style");
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table0 table2 table-striped table-dark table-bordered" id="myTable">
<thead>
<tr>
<th scope="col" rowspan="2">S.N</th>
<th scope="col" rowspan="2">S.N</th>
<th scope="col" rowspan="2">S.N</th>
<th scope="col" colspan="5">S.N</th>
<th scope="col" colspan="5">S.N</th>
<th scope="col" rowspan="2">S.N</th>
<th scope="col" rowspan="2">S.N</th>
<th scope="col" rowspan="2">S.N</th>
</tr>
<tr>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
<th scope="col">S.N</th>
</tr>
</thead>
<tbody>
<tr class="set0">
<td>0</td>
<td>20</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td >21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21
</td>
<td> <button type="button" data-set="0" class="btn btn-primary editbtn3">
Edit
</button>
</td>
</tr>
<tr class="set1">
<td rowspan="2">1</td>
<td rowspan="2">20</td>
<td rowspan="2">21st August</td>
<td>21</td>
<td>21st August</td>
<td >21</td>
<td>21st August</td>
<td>21</td>
<td rowspan="2">21st August</td>
<td rowspan="2">21</td>
<td rowspan="2">21st August</td>
<td rowspan="2">21</td>
<td rowspan="2">21st August</td>
<td rowspan="2">21</td>
<td rowspan="2">21
</td>
<td rowspan="2" > <button type="button" data-set="1" class="btn btn-primary editbtn3">
Edit
</button>
</td>
</tr>
<tr class="set1">
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
</tr>
<tr class="set2">
<td rowspan="3">2</td>
<td rowspan="3">20</td>
<td rowspan="3">21st August</td>
<td>21</td>
<td>21st August</td>
<td >21</td>
<td>21st August</td>
<td>21</td>
<td rowspan="3">21st August</td>
<td rowspan="3">21</td>
<td rowspan="3">21st August</td>
<td rowspan="3">21</td>
<td rowspan="3">21st August</td>
<td rowspan="3">21</td>
<td rowspan="3">21
</td>
<td rowspan="3" > <button type="button" data-set="2" class="btn btn-primary editbtn3">
Edit
</button>
</td>
</tr>
<tr class="set2">
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
</tr>
<tr class="set2">
<td>21</td>
<td>21st August</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
</tr>
<!-- <tr class="set2">
<td>21</td>
<td>21st August</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
</tr> -->
<tr class="set3">
<td rowspan="4">3</td>
<td rowspan="4">20</td>
<td rowspan="4">21st August</td>
<td>21</td>
<td>21st August</td>
<td >21</td>
<td>21st August</td>
<td>21</td>
<td rowspan="4">21st August</td>
<td rowspan="4">21</td>
<td rowspan="4">21st August</td>
<td rowspan="4">21</td>
<td rowspan="4">21st August</td>
<td rowspan="4">21</td>
<td rowspan="4">21
</td>
<td rowspan="4" > <button type="button" data-set="3" class="btn btn-primary editbtn3">
Edit
</button>
</td>
</tr>
<tr class="set3">
<td>21</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
<td>21</td>
</tr>
<tr class="set3">
<td>21</td>
<td>21st August</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
</tr>
<tr class="set3">
<td>21</td>
<td>21st August</td>
<td>21st August</td>
<td>21</td>
<td>21st August</td>
</tr>
</tbody>
</table>
</div>我在这里想要实现的是，当我们单击编辑按钮时，第一、第二和第三列数据和最后一个字段数据应该是不可编辑的，但这里发生的是第一行，所需的字段是可编辑的，但是单击第 2 行和第 3 行的编辑按钮时，其他所有内容都是可编辑的。我试图选择具有不同类的 tr 的第一个同级并使它们的第一个、第二个、第三个和最后一个字段数据不可编辑。问题可能是由于错误的选择。有什么方法可以在不使用类的情况下做到这一点？这是我的代码片段
解决方案
使用 var检查DOM选择是否有tdSet奇数行和偶数行。
使用下面的代码片段。
$('.edit').click(function() {
var edit = $(this).text().trim() == 'Edit';
$(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
var $rows = $("tr.set" + $(this).data("set"));
$rows.each(function() {
var index = $(this).index();
var tdSet = $(this).find($("td")).not(':first').not('td:eq(0)').not(':last');
if (index % 2) {
tdSet = $(this).find($("td")).not('td:eq(0)');
}
tdSet.each(function() {
if (edit) {
$(this).prop('contenteditable', true).css({
'background': '#fff',
'color': '#000'
})
} else {
$(this).prop('contenteditable', false).removeAttr("style");
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table0 table-striped table-dark table-bordered" id="myTable">
<thead>
<tr>
<th scope="col">abc</th>
<th scope="col">cde</th>
<th scope="col">fgh</th>
<th scope="col">fgh</th>
<th scope="col">fgh</th>
<th scope="col">fgh</th>
</tr>
</thead>
<tbody>
<tr class="set1">
<td rowspan="2">abc</td>
<td>abc</td>
<td>abc</td>
<td rowspan="2">abc</td>
<td>abc</td>
<td rowspan="2">
<button type="button" data-set="1" class="btn btn-primary edit">
Edit
</button>
</td>
</tr>
<tr class="set1">
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr class="set2">
<td rowspan="2">abc</td>
<td>abc</td>
<td>abc</td>
<td rowspan="2">abc</td>
<td>abc</td>
<td rowspan="2">
<button type="button" data-set="2" class="btn btn-primary edit">
Edit
</button>
</td>
</tr>
<tr class="set2">
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</tbody>
</table>推荐阅读
- powershell - 计算文件夹和子文件夹中的所有文件 + 显示 0 个文件的文件夹
- python - 如何修复 Python 3.7 导入错误
- javascript - http 或 www 到 https 重定向不起作用
- javascript - 仅当没有来自先前函数调用的另一个 AJAX 请求正在进行时才执行 AJAX 调用
- mysql - 在nodejs-postgresql中显示类别、子类别及其子类别层次树（sequelize js）
- d3.js - 使用 IE 11 的 ASP.NET Web 窗体中的 D3 错误
- c - 我试图将 return 放在代码的末尾，但在返回之前他们一直在搞乱我
- clang - 如何在第一次调用参数后禁止 clang-format 断行？
- c - 请问，为什么当我运行这段代码时，它会打印一个额外的“n”？
- regex - 使正则表达式更具体以排除某些字符