行计数不能正常工作，当我删除添加行javascript中的行 [英] row count is not working properly when i delet the row in add row javascript

问题描述

我使用javascript来添加行一切正常，但当我删除中间行，行计数没有得到更新。

I am using javascript for add rows everything working fine, but when i delete the middle row, row count is not getting update.

行计数如下：1 ，2,3,4,5

Rows counts like that: 1,2,3,4,5

如果我删除第三行它的样子：1,2,4,5

if i delete 3rd row its coming like: 1,2,4,5

HTML

<table class="table  table-hover" id="add-row">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th style="text-align: right;">Delete</th>
        </tr>
    </thead>
    <tbody id="add-row1">
        <tr>
            <td>1</td>
            <td>
                <input type="text" class="form-control input-sm" placeholder="Enter Group Name" id="group" /></td>
            <td>
                <button class="btn btn-sm btn-danger pull-right" id="delPOIbutton" onclick="deleteRow(this)"><i class="fa fa-close"></i>Delete</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <button class="btn btn-sm btn-success pull-right"><i class="fa fa-save"></i>Save</button>
                <button class="btn btn-sm btn-primary" id="addmore" onclick="insRow()"><i class="fa fa-plus"></i>Add</button>
            </td>
        </tr>
    </tfoot>
</table>

Javascript

Javascript

function deleteRow(row) {
    var i = row.parentNode.parentNode.rowIndex;
    if (i > 1) {
        document.getElementById('add-row').deleteRow(i);

    }
    else {
        document.getElementById('add-row').getElementsByTagName('input')[0].value = '';
    }
}
function insRow() {
    var x = document.getElementById('add-row');
    var x1 = document.getElementById('add-row1');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len - 1;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    x1.appendChild(new_row);
}

<table class="table  table-hover" id="add-row">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th style="text-align: right;">Delete</th>
        </tr>
    </thead>
    <tbody id="add-row1">
        <tr>
            <td>1</td>
            <td>
                <input type="text" class="form-control input-sm" placeholder="Enter Group Name" id="group" /></td>
            <td>
                <button class="btn btn-sm btn-danger pull-right" id="delPOIbutton" onclick="deleteRow(this)"><i class="fa fa-close"></i>Delete</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <button class="btn btn-sm btn-success pull-right"><i class="fa fa-save"></i>Save</button>
                <button class="btn btn-sm btn-primary" id="addmore" onclick="insRow()"><i class="fa fa-plus"></i>Add</button>
            </td>
        </tr>
    </tfoot>
</table>

推荐答案

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  if (i > 1) {
    document.getElementById('add-row').deleteRow(i);
    update_number(i);
  } else {
    document.getElementById('add-row').getElementsByTagName('input')[0].value = '';
  }

}

function update_number(i) {
  var table = document.getElementById("add-row");
  for (var r = 1, n = table.rows.length; r < n; r++) {
    for (var c = 0, m = table.rows[r].cells.length; c < 1; c++) {
      var table_date = table.rows[r].cells[0].innerHTML;
      if(!isNaN(table_date)){
        if (i < table_date) {
          var new_data = table_date - 1;
          table.rows[r].cells[0].innerHTML = new_data;
        }
      }  

    }
  }

}

function insRow() {
  var x = document.getElementById('add-row');
  var x1 = document.getElementById('add-row1');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len - 1;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  x1.appendChild(new_row);
}

<table class="table  table-hover" id="add-row">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th style="text-align: right;">Delete</th>
    </tr>
  </thead>
  <tbody id="add-row1">
    <tr>
      <td>1</td>
      <td>
        <input type="text" class="form-control input-sm" placeholder="Enter Group Name" id="group" />
      </td>
      <td>
        <button class="btn btn-sm btn-danger pull-right" id="delPOIbutton" onclick="deleteRow(this)"><i class="fa fa-close"></i>Delete</button>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <button class="btn btn-sm btn-success pull-right"><i class="fa fa-save"></i>Save</button>
        <button class="btn btn-sm btn-primary" id="addmore" onclick="insRow()"><i class="fa fa-plus"></i>Add</button>
      </td>
    </tr>
  </tfoot>
</table>

这下面的函数在动态删除记录时更新数字

You can use this below function to update the number while deleting the record dynamically

function update_number(i) {
  var table = document.getElementById("add-row");
  for (var r = 1, n = table.rows.length; r < n; r++) {
     for (var c = 0, m = table.rows[r].cells.length; c < 1; c++) {
        var table_date = table.rows[r].cells[0].innerHTML;
        if(!isNaN(table_date)){
           if (i < table_date) {
              var new_data = table_date - 1;
              table.rows[r].cells[0].innerHTML = new_data;
           }
        }
     }
  }
}

$ b b

in your deleteRow function like this

in your deleteRow function like this

function deleteRow(row) {
   var i = row.parentNode.parentNode.rowIndex;
   if (i > 1) {
       document.getElementById('add-row').deleteRow(i);
       update_number(i);
   } else {
       document.getElementById('add-row').getElementsByTagName('input') [0].value = '';
   }
}

所做的是通过 var i 到update_number函数，并动态读取表数据并更新数字。

what have done is have passed the var i to the update_number function and read the table data dynamically and updated the numbers.

这篇关于行计数不能正常工作，当我删除添加行javascript中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！