更新

Question

我有一个表行列表，这些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”。 ..

对不起，我之前没有提到过!!

了解行动 http://jsfiddle.net/Lynkb22n/2/

Answer 1

我建议，最简单的方法是：

$('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使用，那么您可以轻松使用所有rowIndex可用的原生HTMLTableRowElement属性：

// 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的：
- each()。
- prop()。

Answer 2

更新

根据您在下面的评论和更新的问题，这是一个更新的解决方案。

var removed = $(".leg-2"),
    siblings = removed.nextAll(), // affect only next siblings to removed element
    pos = ""; // store current number after "leg-"

removed.remove(); // remove element

siblings.each(function (k) {
    $(this).removeClass(function (i, key) {
        pos = key.split("-")[1]; // update number after "leg-"
        return (key.match(/\bleg-\S+/g) || []).join(' ');
    }).addClass("leg-" + (pos - 1)); // add "leg-" plus new position
});

看到它正常工作here。

您可以.removeClass()与.match()一起使用leg删除课程开头，然后使用{{1}添加课程leg加tr的索引}。

看到它正常工作here。

.addClass()

Answer 3

尝试此操作，它将重命名该课程：

$(document).ready(function(){
	   
$("#click").click(function(){
	reorder();
});

			
   });
function reorder(){
   $('#myTable > tbody  > tr').each(function(index) {
console.log($(this).attr('class','leg-'+(index+1)));//avaoid starting fron 0
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="leg-1"><td>a1</td></tr>
<tr class="leg-2"><td>a2</td></tr>
<tr class="leg-3"><td>a3</td></tr>
<tr class="leg-7"><td>a4</td></tr><!--after click on button class will become class="leg-4" -->
<tr class="leg-8"><td>a5</td></tr><!--after click on button class will become class="leg-5" -->
</table>

<button id="click">CliCk</button>

jQuery：如何重新计算和重命名元素

3 个答案:

更新