mh-github · February 15, 2017 16:50
diff --git a/addDeleteScreenRow.html b/addDeleteScreenRow.html
 <html>
 <head>
    <title> Dynamically add / delete rows in HTML page </title>

    <script language="javascript">
        var globalRowCount = 2;
        function addScreenRow(tableID)
        {
 	        var table     = document.getElementById(tableID);
 	        var rowCount  = table.rows.length;
 	        var row       = table.insertRow(rowCount);

 	        var cell1     = row.insertCell(0);
 	        var element1  = document.createElement("input");
 	        element1.type = "checkbox";
 	        cell1.appendChild(element1);

 	        var cell2       = row.insertCell(1);
 	        cell2.innerHTML = globalRowCount; //rowCount + 1;

 	        var cell3       = row.insertCell(2);
 	        var element2    = document.createElement("input");
 	        element2.type   = "text";
 	        cell3.appendChild(element2);
            
 	        globalRowCount++;
        }

        function delScreenRow(tableID)
        {
            try {
                var table    = document.getElementById(tableID);
                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) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
            }
            catch(e) {
                alert(e);
            }
        }

    </script>
 </head>

 <body>
    <table id="dataTable" border="1">
        <tr>
            <td><input type="checkbox" name="chk"/></td>
            <td> 1 </td>
            <td> <input type="text" /> </td>
         </tr>
    </table>

    <input type="button" value="Add Row"    onclick="addScreenRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="delScreenRow('dataTable')" />

 </body>
 </html>
	<html>
	<head>
	<title> Dynamically add / delete rows in HTML page </title>

	<script language="javascript">
	var globalRowCount = 2;
	function addScreenRow(tableID)
	{
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);

	var cell1 = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "checkbox";
	cell1.appendChild(element1);

	var cell2 = row.insertCell(1);
	cell2.innerHTML = globalRowCount; //rowCount + 1;

	var cell3 = row.insertCell(2);
	var element2 = document.createElement("input");
	element2.type = "text";
	cell3.appendChild(element2);

	globalRowCount++;
	}

	function delScreenRow(tableID)
	{
	try {
	var table = document.getElementById(tableID);
	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) {
	table.deleteRow(i);
	rowCount--;
	i--;
	}
	}
	}
	catch(e) {
	alert(e);
	}
	}

	</script>
	</head>

	<body>
	<table id="dataTable" border="1">
	<tr>
	<td><input type="checkbox" name="chk"/></td>
	<td> 1 </td>
	<td> <input type="text" /> </td>
	</tr>
	</table>

	<input type="button" value="Add Row" onclick="addScreenRow('dataTable')" />
	<input type="button" value="Delete Row" onclick="delScreenRow('dataTable')" />

	</body>
	</html>
No results found