Member Avatar for Dimonai

Hello to everyone, my problem is, Im creating dynamacly rows in a table with a textfield and a checkbox, but to delete the rows the checkbox must be on the first column witch I dont get it, if I move the checkbox to the last column and press it, javascript associates that the checkbox is not checked! How can this be fixed? Do I need to loop through the elements of the row ?

This is the code to add a row:

<script>

var intTextBox=0;
  $(function(){
    var tbl = $("#Tablei");

    $("#addRowBtn").click(function(){
        intTextBox = intTextBox + 1;
        var contentID = document.getElementById('content');
        var newTBDiv = document.createElement('div');
        newTBDiv.setAttribute('id','strText'+intTextBox);
        $("<tr><td><input type='text' name='txt[]' id='"+intTextBox+"'></td><td><input type='checkbox' name='chk'/></td></tr>").appendTo(tbl);  
        contentID.appendChild(newTBDiv); 

        });
    });    

</script>

This is the code to delete a row:

<script>
function myFunction(){
      try {
          var table = document.getElementById('Tablei');
          // var table = x.getAttribute("id");
          var rowCount = table.rows.length;

          for(var i=0; i<rowCount; i++){
              var row = table.rows[i];
              var chkbox = row.cells[0].childNodes[0];

              if(null != chkbox && true == chkbox.checked) {
                  alert("a");
                  if(rowCount <= 1) {
                      alert("Cannot delete all the rows.");
                      break;
                  }
                  table.deleteRow(i);
                  rowCount--;
                  i--;
              }
           }
       }
       catch(e) {
           alert(e);
       }
}
</script>
Edited by Member #120589 because: wrong forum - js not php
  • 2 Contributors
  • 2 Replies
  • 287 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Dimonai

Dani AI

Generated

The core issue is the delete routine assuming the checkbox always lives in the first cell and as the first child. When the box is moved to another column (or when whitespace produces a text node), that fixed lookup fails. A robust approach is to find the checkbox inside each row instead of indexing cells, and iterate rows from the end toward the start so removing rows doesn't break the loop.

// find checked boxes anywhere in a row and delete that row (works regardless of column)
var table = document.getElementById('Tablei');

for (var i = table.rows.length - 1; i >= 0; i--) {
  var row = table.rows[i];
  var checkbox = row.querySelector('input[type="checkbox"]'); // finds the checkbox wherever it is
  if (checkbox && checkbox.checked) {
    table.deleteRow(i); // or: row.remove() in modern browsers
  }
}

Notes and quick tips: give the checkboxes a distinctive class (for example class="row-check") so selectors are explicit and you avoid accidental inputs; when building rows, append them to the table’s tbody rather than leaving stray DIVs around; prefer row.querySelector(...) or row.children over childNodes (childNodes includes text nodes). Iterating backwards avoids manual index adjustments. As @LastMitch hinted, selecting checked inputs is the right idea — the above pattern makes that selection resilient. Also, tidy up the add-row code (remove unused elements and use predictable IDs or prefixed IDs) to simplify debugging.

Recommended Answers

All 2 Replies

Member Avatar for Member #949455

but to delete the rows the checkbox must be on the first column witch I dont get it, if I move the checkbox to the last column and press it, javascript associates that the checkbox is not checked!

You can try this:

$('#Tablei input[type=checkbox]:checked').each(function() { 
   var row = $(this).parent().parent();
   var rowcells = row.find('td');
});

<table><tr><td><input type="checkbox" name="Tablei" checked></td></tr></table>

Then to delete you can keep the code intact and modify it a little so you can delete the <td>

Member Avatar for Dimonai

Hi LastMitch, sorry for not replying for 2 FULL WEEKS, I forgot about this issue of mine, last night I picked it up and I was able to get it to work! Thank you for helping :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.