Dynamically add a new row to a table in Javascript

Question

I used the regular addRow function and the removeRow function to dynamically add and remove rows in a table.

function addRow()
{
  var ptable = document.getElementById('ptableQuestion');
  var lastElement = ptable.rows.length;
 var index = lastElement;
  var row = ptable.insertRow(lastElement);


 var cellLeft = row.insertCell(0);
 var textNode = document.createTextNode(index);
 cellLeft.appendChild(textNode);

  var cellText = row.insertCell(1);
 var element = document.createElement('textarea');
 element.name = 'question' + index;
 element.id = 'question' + index;
 element.rows="2";
 element.cols="60" 

 var cellText1 = row.insertCell(2);
 var element1 = document.createElement('input');
 element1.type = 'checkbox';
 element1.name = 'cb';
 element1.id = 'cb';

cellText.appendChild(element);
cellText1.appendChild(element1);
  document.getElementById("psize").value=index;
 }



  function checkCheckboxes() { 
var e = document.getElementsByName("cb"); 
var message  = 'Are you sure you want to delete?'; 
var row_list = {length: 0}; 

for (var i = 0; i < e.length; i++) { 
    var c_box = e[i]; 

    if (c_box.checked == true) { 
        row_list.length++; 

        row_list[i] = {}; 
        row_list[i].row = c_box.parentNode.parentNode; 
        row_list[i].tb  = row_list[i].row.parentNode; 
    } 
} 

if (row_list.length > 0 && window.confirm(message)) { 
    for (i in row_list) { 
        if (i == 'length') { 
            continue; 
        } 

        var r = row_list[i]; 
        r.tb.removeChild(r.row); 
    } 
} else if (row_list.length == 0) { 
    alert('You must select an email address to delete'); 
} 

}

<form action="show.jsp" method="post" onsubmit="return validate();">
<input type="hidden" name="psize" id="psize">
<table style="border:1px solid #000000;" bgcolor="#efefef"
    id="ptablePerson" align="center">
  <tr>
    <th colspan="3">Add New Person</th>
</tr>
<tr>
        <td>1</td>
        <td><input type="text" name="person1" id="person1" size="30" />
    <input type="button" value="Add" onclick="addRow();" /></td> 
    <td><input type="checkbox" id="cb" name="cb"/></td>

</tr>
</table>
<table align="center">
<tr>
    <td><input type="button" value="Remove" onclick="checkCheckboxes();" />
    <input type="Submit" value="Submit" /></td>
    </tr>
  </table>
  </form>
  </BODY>
   </HTML>

My problem is that the table received 5 rows, if I press the checkbox button to delete row 3, the index will become 1 2 4 5. Is there a way that can change it to 1 2 3 4

Answer 1

It looks like a simple delete item from a list. You should get all the rows in the table and move all the rows one step back after the delete operation is complete.

Answer 2

i, spn td.So, iterartion. , u 3 (1,2,3,4,5), 1,2,3,4.Jquery,

 var rowCount = $('#ptableQuestion tr').length;
    if (rowCount != 0) {
        i = 0;
         $('#ptableQuestion tr').each(function(i) {
            $(this).find("td .spn").html(i);

        });
    }
});

, .