添加和删​​除行时如何重新排序表行号

Question

我正在使用 javascript 动态生成表行（不涉及 jquery）。每行有 3 个单元格区域编号、输入和删除按钮。添加的行数使用选择框，如果他们选择 3，则添加 3 行等。我想要发生的是，如果他们添加 3 行，然后再添加 3 行。这些行将显示为 1、2、3、4、5、6，目前为 1、2、3、1、2、3。我还有什么在删除行时重新排序行。

当前代码php文件：

   function display_Zones($focus, $field, $value, $view){

    global $locale, $app_list_strings, $mod_strings;

    $html = '';

    if($view == 'EditView'){

        $html .= '<script src="modules/dry_Zones/zone_items.js"></script>';
        $html .= "<div style='padding-top: 10px; padding-bottom:10px;'>";
        $html .= "<select id='zone' name='zone'>";
        $html .= get_select_options_with_id($app_list_strings["zone_list"]);
        $html .= "</select> ";

        $html .= "<input type=\"button\" tabindex=\"116\" class=\"button\" value=\"addZone\" id=\"addZone\" onclick=\"insertZone()\" />";
        $html .= "</div>";

        $html .= "<table border='0' cellspacing='4' width='40%' id='zoneItems'>";
        $html .= "<tr><td></td><td>Motor Reference Point</td><td></td></tr>";

        $html .= "</table>";



        return $html;
    }

javascript 文件：

 var num = 1;

 function insertZone() {

var table = document.getElementById('zoneItems');

var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;

if(number != ''){


    for (var i=0; i < number; i++)
    {
        var x = table.insertRow(-1);
        var a = x.insertCell(0);
        num = num+i;

        a.innerHTML = "<span>Zone: "+num+"</span> ";

        var b = x.insertCell(1);
        b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";

        var c = x.insertCell(2);
        c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
    }


}

}

  function removeZone(rows) {

  var _row = rows.parentElement.parentElement;
  document.getElementById('zoneItems').deleteRow(_row.rowIndex);



   }          

Answer 1

可能不是最有效的方式，但我认为除非您有数千行，否则您不会注意到任何问题。当您添加/删除行时，您只需遍历每行的第一个表格单元格并根据索引对其进行更新。

Array.prototype.forEach.call(document.querySelectorAll('td:first-child'),
function (elem, idx) {
    elem.innerHTML = idx + 1;
});

http://jsfiddle.net/ExplosionPIlls/2QxX6/

Answer 2

最后只是这样做：

function insertZone() {

var table = document.getElementById('zoneItems');

var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;

if(number != ''){


    for (var i=0; i < number; i++)
    {
        var x = table.insertRow(-1);
        var a = x.insertCell(0);
        num = i+1;

       // a.innerHTML = "<span>Zone: "+num+"</span> ";

        var b = x.insertCell(1);
        b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";

        var c = x.insertCell(2);
        c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
    }

    count();
}

}

  function removeZone(rows) {

var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);

count();
}

function count(){

var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
row_count = tbody.rows.length - 1;

for (var i = 0, row; row = tbody.rows[i]; i++) {

    if(i != 0){

        for (var j = 0, col; col = row.cells[j]; j++) {

            if(j == 0){
                col.innerHTML = "<span>Zone: "+i+"</span> ";
            }
        }
    }

}

}