使用javascript动态行编号

如何解决使用javascript动态行编号

我试图在单击添加和删除按钮时提供动态行号，但在删除任何行之间，它没有提供正确的行号。 我在表（数据表）中的 td 是：

echo "<td> 1 <input type='hidden' name='task_number[]'  value='1'> </td>";

添加和删除 btn :

echo "<input type='button' value='Add Task' onClick=addRow('dataTable') />  "; 
echo "<INPUT type='button' value='Delete Task' onclick=deleteRow('dataTable') />";

在 JavaScript 中：

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length -1;
    
    var inps = document.getElementsByName('task_number[]');
    var inp=inps[rowCount-1].value; // array start from 0
    inp = ++inp;
   
    var cell2 = row.insertCell(1);
    cell2.innerHTML = inp;
}

Output

解决方法

使用这个功能

function setRowNumber()
{
   $('#tablename tbody tr').each(function (idx) {
        $(this).children("td:eq(1)").html(idx + 1);
   });
}

我还放了动态表代码。如果选中该复选框，则可以删除该行。

orderTable();
    
     function addRow()
     {
         var rowCount = $('#example tr').length;
          if(rowCount == 1)
          {
              var tr = "<tbody><tr id='tr'><td><input type='checkbox' id='chk' name='chk' value='chk'></td>" + "<td></td><td>Task Designer</td></tr></tbody>";
     $('#example thead:last').after(tr);
          }
          else
          {
              var tr = "<tr id='tr'><td><input type='checkbox' id='chk' name='chk' value='chk'></td>" + "<td></td><td>Task Designer</td></tr>";
     $('#example tr:last').after(tr);
          }
       orderTable();
     }
     
   function deleteRow()
     {
         var i = 0;
         $('#example input[type=checkbox]').each(function(){
            if($(this).is(":checked"))
            {
               $('#tr' + (i + 1)).remove();
            }
            i = i + 1;
         });
         $('#example input[type=checkbox]').each(function(){
           
             $(this).prop('checked',false);
         });
         orderTable();
     }
    function orderTable()
    {
          var rowCount = $('#example tbody tr').length;
          if(rowCount > 0)
          {
             $('#example tbody tr').each(function (idx) {
              var num = idx + 1;
              $(this).children("td:eq(1)").html(num);
              $(this).children("td:eq(2)").html('Task Designer' + num);
              $(this).attr('id','tr' + num);
              
             
              //set input names
              $(this).children("td:eq(0)").children().attr('id','chk' + num);
              $(this).children("td:eq(0)").children().attr('name','chk' + num);
              $(this).children("td:eq(0)").children().attr('value','chk' + num);
          });
          }
          
    }

#example
{ 
    border:1px solid #ddd;
    border-collapse: collapse;
}
th
{
   background:#333;
   color:white;
   font-weight:bold;
   height:40px;
}
td
{
   text-align: center; 
   vertical-align: middle;
   border:1px solid #ddd;
   height:40px;
}

<input type='button' id="btnAdd" value='Add Task' onclick="addRow()" />
<input type='button' id="btnRemove" value='Delete Task' onclick="deleteRow()" />
 <table id="example" class="display" cellspacing="0" width="100%" border="0">
            <thead>
               <tr>
                   <th>Select</th>
                   <th>Task Number</th>
                   <th>Task Description</th>
                </tr>
            </thead>
            <tbody>
                
                <tr id="tr">
               
                   <td><input type="checkbox" id="chk" name="chk" value="chk"></td>
                   <td>11</td>
                  <td>Task Designer</td>
                </tr>
                <tr id="tr">
                <td><input type="checkbox" id="chk" name="chk" value="chk"></td>
                   <td>2</td>
                  <td>Task Designer</td>
                </tr>
                <tr id="tr">
                 <td><input type="checkbox" id="chk" name="chk" value="chk"></td>
                   <td>3</td>
                  <td>Task Designer</td>
                </tr>
               
            </tbody>
        </table>
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>