How to add table heading i.e(<th>) dynamically using checkbox in javascript if the user click the checkbox means it need to add a table heading dynamically if the user was was uncheck the checkbox means the table header was to be removed so please give me proper solution for me i attached my code below:
How to add table heading i.e() dynamically using checkbox in javascript if the user click the checkbox means it need to add a table heading dynamically if the user was was uncheck the checkbox means the table header was to be removed so please give me proper solution for me i attached my code below:
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" value="Add column" name="chk" id="chk1" onclick="return addColumn()" /><label>First CheckBox</label><br>
<input type="checkbox" value="Add column" name="chk" id="chk2" onclick="addColumn()" /><label>Second CheckBox</label><br>
<table id="my_table" align="center" border="2" cellpadding="0" cellspacing="0">
<thead>
<tr id="myRow">
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function addColumn()
{ var x = document.getElementById("chk1");
var thead = document.getElementById('my_table').tHead;
if(x.checked)
{
for (var i=0; i< thead.rows.length; i++)
{
var tableth = document.createElement('th');
thead.rows[i].appendChild(tableth);
tableth.innerHTML = 'First';
}
}
else
{
var tableth = document.getElementById('my_table').tHead.remove();
}
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire