CODEWITHSUNDEEP
javascript
user794846
user794846

Reputation: 1931

How to re-order table row numbers when rows are added and removed

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.

Current code php file:

   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 file:

 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);



   }

Upvotes: 0

Views: 2440

Answers (2)

user794846
user794846

Reputation: 1931

Ended up just doing it like this:

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

}

}

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Probably not the most efficient, way, but I don't think you'll notice any problems unless you have thousands of rows. When you add/delete rows, you could just iterate through the first table cell of each row and update it based on the index.

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

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

Upvotes: 1

Related Questions