我有一个表格行列表,这些 tr 出于某种原因(leg-1、leg-2 等)有编号的类别。已经可以从此上下文中删除单个 tr。
删除一个 tr 后,我需要重命名剩余的 tr。
例子: 我有
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
现在我删除 leg-2。剩下的是:
<tr class="leg-1"></tr>
<tr class="leg-3"></tr>
现在我想重命名剩余的 tr,使其回到 leg-1 和 leg-2。
这怎么能做到??
感谢您的帮助!
编辑: 我忘了提到它可以有多个 tr 类为“leg-1”、“leg-2”……所以正确的开始示例是
<tr class="leg-1"></tr>
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
<tr class="leg-3"></tr>
现在,当我删除 leg-2 时,两个带有 class="leg-3"的 tr 都必须重命名为 class="leg-2"。 ..
抱歉我之前没有提到这个!
最佳答案
我最直接的建议是:
$('tr').each(function(i) {
// looking for a class-name that starts with (follows a
// word-boundary: \b) leg- followed by one or more numbers (\d+)
// followed by another word-boundary:
var matchedClass = this.className.match(/\bleg-\d+\b/);
// if a match exists:
if (matchedClass) {
// set the node's className to the same className after replacing
// the found leg-X class name with the string of 'leg-' plus the
// index of the current element in the collection plus one:
this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
}
});
$('tr').each(function(i) {
var matchedClass = this.className.match(/\bleg-\d+\b/);
// if a match exists:
if (matchedClass) {
this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="leg-2323523">
<td>1</td>
</tr>
<tr class="leg-2323523">
<td>2</td>
</tr>
<tr class="leg-2323523">
<td>3</td>
</tr>
<tr class="leg-2323523">
<td>4</td>
</tr>
</tbody>
</table>
使用 id
更容易一些,因为我们不需要像处理类那样保留预先存在的并发 id
:
// selects all <tr> elements, sets their `id` property
// using the anonymous function available within prop():
$('tr').prop('id', function (i) {
// i: the index amongst the collection of <tr> elements:
return 'leg-' + (i+1);
});
$('tr').prop('id', function (i) {
return 'leg-' + (i+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
如果索引/行号只是为了让 JavaScript 可用,那么您可以轻松地使用对所有 HTMLTableRowElement
可用的 native rowIndex
属性:
// selects <tr> elements, binds the 'mouseenter' event-handler:
$('tr').on('mouseenter', function() {
// logs the HTMLTableRowElement rowIndex property
// to the console:
console.log(this.rowIndex);
});
$('tr').on('mouseenter', function() {
console.log(this.rowIndex);
});
td {
border: 1px solid #000;
width: 4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
引用资料:
- JavaScript:
- jQuery:
关于javascript - jQuery:如何重新计数和重命名元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28176030/