#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Location
    Scotland
    Posts
    109
    Rep Power
    7

    Javascript problem, help to find hidden rows


    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 so if they select 3, 3 rows are added ect. Each row has a number attached to it.

    When a row is deleted the row is hidden and I want the count of numbers to be reset to not include the hidden rows as they will be marked for deletion in my app. Right now if you add more rows on the count is re counted correctly but if you delete a row the count function does not take this into account, and this is where I am stuck.

    Here is a working example: http://jsfiddle.net/6CJGp/8/

    the html

    Code:
    <div style='padding-top: 10px; padding-bottom:10px;'> <select id='zone' name='zone'>     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option>      </select>          <input type="button" value="add zones"  onclick="insertZone()" />   </div>

    Code:
    function insertZone() {      var table = document.getElementById('zoneItems');      var e = document.getElementById('zone');     var number = e.options[e.selectedIndex].value;     var rowcount = document.getElementById('zoneItems').rows.length;      if(rowcount == 0){         var x = table.insertRow(-1);          var head1 = x.insertCell(0);         head1.innerHTML = "Zone";          var head2 = x.insertCell(1);         head2.innerHTML = "Motor Reference Point";          var head3 = x.insertCell(2);         head3.innerHTML = " ";      }          for (var i=0; i < number; i++)         {             var x = table.insertRow(-1);             var a = x.insertCell(0);             //a.innerHTML = "<input type='hidden' name='zone_id' value='' /> ";              num = i+1;              var b = x.insertCell(1);             b.innerHTML = "<input type='text' name='zone_description[]' size='18' value=''/><input id='zone"+num+"' type='hidden' name='zone_deleted[]' value='0' />";              var c = x.insertCell(2);             c.innerHTML = "<button type='button' class='button lastChild' onclick='removeZone(this)' > x </button>";         }          //set the row ordering         count();  }  function removeZone(rows) {      var _row = rows.parentElement.parentElement;      _row.cells[1].getElementsByTagName('input')[1].value = '1';      document.getElementById('zoneItems').rows[_row.rowIndex].style.display = 'none';      count();   }  function count(){ //sets the row ordering      var table = document.getElementById("zoneItems");     var tbody = table.tBodies[0];      for (var i = 0, row; row = tbody.rows[i]; i++) { //loop through rows          if(i != 0){//if not the first row             // var deleted = row.cells[1].getElementsByTagName('input')[1].value;               for (var j = 0, col; col = row.cells[j]; j++) {//loop through cols                   if(j == 0){//insert into only the first td                     col.innerHTML = "<span>" +i+ "</span><input type='hidden' name='zone_id' value='' />";                 }              }         }      }  }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Location
    Scotland
    Posts
    109
    Rep Power
    7
    I got it to work see fiddle for answer

IMN logo majestic logo threadwatch logo seochat tools logo