Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkClient side: get the value of combobox and its input
1guest162.158.235.2443qbtdijSep 26, 2021 12:17:05 PMlinkresources
index.zulzul<zk>
<head>
<title>Dynamically Add Remove Table Rows in JavaScript</title>
<style>
table { width: 70%; }
table, th, td { border: solid 1px #DDD;
border-collapse: collapse; padding: 2px 3px; text-align: center;
}
</style>
</head>
<body onload="createTable()">
<p>
<input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
</p>
<div id="cont"></div> <!--the container to add the table.-->
<p><input type="button" id="bt" value="Submit Data" onclick="submit()" /></p>
</body>
<script>
var arrHead = new Array();
arrHead = ['', 'Emp. Name', 'Designation', 'Age']; // table headers.
function createTable() {
var empTable = document.createElement('table');
empTable.setAttribute('id', 'empTable'); // table id.
var tr = empTable.insertRow(-1);
for (var h = 0; h < arrHead.length; h++) {
var th = document.createElement('th'); // the header object.
th.innerHTML = arrHead[h];
tr.appendChild(th);
}
var div = document.getElementById('cont');
div.appendChild(empTable); // add table to a container.
}
function addRow()
{
var empTab = document.getElementById('empTable');
var rowCnt = empTab.rows.length; // get the number of rows.
var tr = empTab.insertRow(rowCnt); // table row.
tr = empTab.insertRow(rowCnt);
for (var c = 0; c < arrHead.length; c++)
{
var td = document.createElement('td');
td = tr.insertCell(c);
if (c == 0)
{
var button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Remove');
button.setAttribute('onclick', 'removeRow(this)');
td.appendChild(button);
}
else
{
var ele = document.createElement('input');
ele.setAttribute('type', 'text');
ele.setAttribute('value', '');
td.appendChild(ele);
}
}
}
function removeRow(oButton)
{
var empTab = document.getElementById('empTable');
empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // buttton -> td -> tr
}
function submit()
{
var myTab = document.getElementById('empTable');
var arrValues = new Array();
for (row = 1; row < myTab.rows.length - 1; row++)
{
for (c = 0; c < myTab.rows[row].cells.length; c++)
{
var element = myTab.rows.item(row).cells[c];
if (element.childNodes[0].getAttribute('type') == 'text')
{
arrValues.push("'" + element.childNodes[0].value + "'");
}
}
}
console.log(arrValues);
}
</script>
</zk>test.htmlhtml<html>
<head>
<title>Dynamically Add Remove Table Rows in JavaScript</title>
<style>
table { width: 70%; }
table, th, td { border: solid 1px #DDD;
border-collapse: collapse; padding: 2px 3px; text-align: center;
}
</style>
</head>
<body onload="createTable()">
<p>
<input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
</p>
<div id="cont"></div> <!--the container to add the table.-->
<p><input type="button" id="bt" value="Submit Data" onclick="submit()" /></p>
</body>
<script>
var arrHead = new Array();
arrHead = ['', 'Emp. Name', 'Designation', 'Age']; // table headers.
// first create a TABLE structure by adding few headers.
function createTable() {
var empTable = document.createElement('table');
empTable.setAttribute('id', 'empTable'); // table id.
var tr = empTable.insertRow(-1);
for (var h = 0; h < arrHead.length; h++) {
var th = document.createElement('th'); // the header object.
th.innerHTML = arrHead[h];
tr.appendChild(th);
}
var div = document.getElementById('cont');
div.appendChild(empTable); // add table to a container.
}
// function to add new row.
function addRow() {
var empTab = document.getElementById('empTable');
var rowCnt = empTab.rows.length; // get the number of rows.
var tr = empTab.insertRow(rowCnt); // table row.
tr = empTab.insertRow(rowCnt);
for (var c = 0; c < arrHead.length; c++) {
var td = document.createElement('td'); // TABLE DEFINITION.
td = tr.insertCell(c);
if (c == 0) { // if its the first column of the table.
// add a button control.
var button = document.createElement('input');
// set the attributes.
button.setAttribute('type', 'button');
button.setAttribute('value', 'Remove');
// add button's "onclick" event.
button.setAttribute('onclick', 'removeRow(this)');
td.appendChild(button);
}
else {
// the 2nd, 3rd and 4th column, will have textbox.
var ele = document.createElement('input');
ele.setAttribute('type', 'text');
ele.setAttribute('value', '');
td.appendChild(ele);
}
}
}
// function to delete a row.
function removeRow(oButton) {
var empTab = document.getElementById('empTable');
empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // buttton -> td -> tr
}
// function to extract and submit table data.
function submit() {
var myTab = document.getElementById('empTable');
var arrValues = new Array();
// loop through each row of the table.
for (row = 1; row < myTab.rows.length - 1; row++) {
// loop through each cell in a row.
for (c = 0; c < myTab.rows[row].cells.length; c++) {
var element = myTab.rows.item(row).cells[c];
if (element.childNodes[0].getAttribute('type') == 'text') {
arrValues.push("'" + element.childNodes[0].value + "'");
}
}
}
// finally, show the result in the console.
console.log(arrValues);
}
</script>
</html>