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

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> "; 
      } 
     } 
    } 

} 

}