How to re-order table row numbers when rows are added and removed
<p>I am dynamically generating table rows using javascript (no jquery involved). Each row has 3 cells zone number, input, and a delete button. The number of rows added uses a select box to if they select 3, 3 rows are added ect. What I want to happen is if they add 3 rows then add another 3. the rows will be will displayed as 1,2,3,4,5,6, Currently its 1,2,3,1,2,3. I also what to re-order the rows when a row is deleted.</p>

<p>Current code php file:</p>

<pre><code>   function display_Zones($focus, $field, $value, $view){

    global $locale, $app_list_strings, $mod_strings;

    $html = '';

    if($view == 'EditView'){

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

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

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

        $html .= "&lt;/table&gt;";



        return $html;
    }
</code></pre>

<p>javascript file:</p>

<pre><code> 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 &lt; number; i++)
    {
        var x = table.insertRow(-1);
        var a = x.insertCell(0);
        num = num+i;

        a.innerHTML = "&lt;span&gt;Zone: "+num+"&lt;/span&gt; ";

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

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


}
</code></pre>

<p>}</p>

<pre><code>  function removeZone(rows) {

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



   }          
</code></pre>
