如何为动态更改的表设置索引? [英] How to set the index for a dynamically changing table?

问题描述

我创建了一个表单，您可以在其中使用javascript和jQuery添加或删除表行.我想知道如何获取和设置每个表行的索引，以便即使从表中间删除和删除元素也能保持顺序.该表格的格式为:

I have created a form where you can add or delete table rows using javascript and jQuery. I would like to know how I can obtain and set the index for each table row such that sequence is maintained even if I were to delete and element from the middle of the table. The table is of the form:

<thead>
    <tr>
        <th>Index</th>
        <th>Name</th>
        <th>Property</th>
        <th>Edit/Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="index">Index goes here (1)</td>
        <td>NameOne</td>
        <td>PropOne</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
    <tr>
        <td class="index">2</td>
        <td>NameTwo</td>
        <td>PropTwo</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
    <tr>
        <td class="index">3</td>
        <td>NameThree</td>
        <td>PropThree</td>
        <td><span class="edit">Edit Icon</span> <span class="delete">Delete Icon</span></td>
    </tr>
</tbody>

现在我要实现的是如果我要删除第二行，则前第三行的索引应自动更改为2，如果要添加新元素，则应该自动采用3的索引值，依此类推上.

Now what I want to achieve is if I were to delete the second row, the index of the previous third row should automatically change to 2 and if I were to add new element it should automatically take the index value of 3 and so on.

我试图通过以下方式实现这一目标:

I tried to achieve this with:

function setIndex(){
   $("td.index").each(function(index) {
       $(this).text(++index);
   });
}

但是当我使用上面的函数时，尽管添加元素时初始索引正确打印，但是当我在删除或编辑行后再次调用该函数时，索引不会正确更新(我使用jQuery remove删除了该行).

But when I used the above function although the initial index when the elements were added printed properly the index wouldn't update properly when I called the function again after deleting or editing a row( I deleted the row using jQuery remove).

我也正在使用jQuery append()创建新的表行.

Also I am creating the new table rows with jQuery append().

我认为，尽管我使用了remove()，但它们并没有像我在setIndex()中使用console.log("test")语句时那样被完全删除，尽管"test"只被打印了两次(我最初创建了3行，并删除了其中的一行)，它打印了三次，表示有3个tr.index.

I think that although I used remove() they don't get deleted completely as when I used a console.log("test") statement inside the setIndex() although "test" was only supposed to be printed twice(I had initially created 3 rows and deleted one of them) it go printed thrice signifying that there were 3 tr.index's.

请帮助我解决同样的问题.

Please help me solve the same.

推荐答案

我建议使用@ pravin-prajapati提供的CSS/Counter答案，因为它不需要JS开销并且可以轻松扩展.

I'd suggest using the the CSS/Counter answer by @pravin-prajapati because it requires no JS overhead and will scale easily.

对您的代码有什么问题很感兴趣，因为它对我来说很好，所以重新构建它.似乎工作正常.

Was interested in what the problem was with your code because it looked fine to me so rebuilt it. Seemed to be working fine.

我猜测问题实际上出在将代码附加到 .delete 上的方式上，尤其是如果要添加新行或重新创建行，则 编辑后.

I'm guessing the problem is actually in the way you're attaching code to the .delete click, especially if you're adding new rows or recreating rows after an edit.

如果您在初始 document.ready (或 window.onload ...)将回调函数附加到现有的 .delete <之后添加新行，/code>元素，它将不会自动将回调附加到新的 .delete 元素.

If you add new rows after the initial document.ready (or window.onload...) has attached the callback to the existing .delete elements, it will not automatically attach the callback to the new .delete elements.

换句话说，不要在您的init中这样做:

In other words, don't do this in your init:

$('.delete').on('click', function(){
  // do stuff
});

因为这仅适用于初始化期间存在的 .delete 元素.有几种解决方法，但一种简单的方法是侦听父行中的click事件，然后在运行回调之前将它们过滤到实际目标. jQuery的 on 方法使此操作变得容易.

because that will only work for .delete elements that exist during the init. There are a few ways around this but an easy way is to listen for click events on a parent of the rows and then filter them to your actual target before running the callback. jQuery's on method makes this easy.

下面是一个使用表作为事件侦听器的示例.

Below is an example with the table as the event listener.

编辑:
如果由于某种原因无法做到这一点，则可以考虑使用 jQuery.clone()并设置 withDataAndEvents 和/或 deepWithDataAndEvents 改为 true ，例如 $('tr.template').clone(true，true); .这将复制< tr> 及其附加的任何事件处理程序(第一个"true") 和附加至其任何子元素的所有事件处理程序(第二个"true"'). jQuery克隆文档

EDIT:
If, for some reason, this isn't possible, you might look into using jQuery.clone() and setting withDataAndEvents and/or deepWithDataAndEvents to true like $('tr.template').clone(true, true);. This will copy the <tr> and any event handlers attached to it (first 'true') and any event handlers attached to any of its child elements (second 'true'). jQuery Clone Docs

$(document).ready(function(){

  // your function, copied 100%
  function setIndex(){
   $("td.index").each(function(index) {
       $(this).text(++index);
   });
  }

  // set the index to begin with. Note the last three 
  // row indexes are actually empty in the sample HTML
  setIndex();

  // Move the click listener to the table. 
  $('table').on('click', '.delete', function(){    
    // remove the tr...
    $(this).parents('tr').remove();
    //... and reset the index
    setIndex();  
  })
  
});

table {
  font-family: sans-serif;
  margin: 10px;
}
table td {
  border: 1px solid #ccc;
  padding: 10px;
}
.delete {
  color: red;
  cursor: pointer;
  font-size: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
        <th>Index</th>
        <th>Name</th>
        <th>Property</th>
        <th>Edit/Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="index">Index here</td>
        <td>NameOne</td>
        <td>PropOne</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
    <tr>
        <td class="index">2</td>
        <td>NameTwo</td>
        <td>PropTwo</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
    <tr>
        <td class="index">3</td>
        <td>NameThree</td>
        <td>PropThree</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
      <tr>
        <td class="index"></td>
        <td>Name 4</td>
        <td>Prop 4</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
      <tr>
        <td class="index"></td>
        <td>Name 5</td>
        <td>Prop 5</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
      <tr>
        <td class="index"></td>
        <td>Name 6</td>
        <td>Prop 6</td>
        <td><span class="edit">Edit</span> <span class="delete">Delete</span></td>
    </tr>
</tbody>
</table>

这篇关于如何为动态更改的表设置索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！