Full version: jsB@nk » Form » Table » Dynamic Table
URL: https://www.javascriptbank.com/dynamic-table-2.html
Enter information into this dynamic table and see the power of W3C-DOM compatible browsers. Absolutely Amazing!
Full version: jsB@nk » Form » Table » Dynamic Table
URL: https://www.javascriptbank.com/dynamic-table-2.html
<STYLE>INPUT {BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; BACKGROUND-COLOR: transparent}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT>lastrow =2 ; /* The number of the inital empty row, starting at 0. IE 0 for an table that starts with just one empty row. */cols = 10; /* The number of colums in the table. */function altrow(r){ if (r == lastrow) /* If true, the last row has been changed, so add a new blank row. */ { newrow = document.all.dyntab.insertRow(); newrow.setAttribute("id", "tr" + ++lastrow); for (i = 0; i < cols; i++) { c = newrow.insertCell(); c.insertAdjacentHTML("afterBegin", "<input type=text onChange=altrow(" + lastrow + ")>"); } } else { /* We need a way to know what row is to be deleted: this is just one idea. */ thisrow = document.getElementById("tr" + r).rowIndex; /* I did not bother naming the input fields, but they could be referenced by name instead. */ for (i = 0; i < cols; i++) { if (document.forms[0].elements[cols * thisrow + i].value != "") /* If true, the line is not all blank. */ { break; } } if (i == cols) /* If true the line was all blank, so delete the row. */ { document.all.dyntab.deleteRow(thisrow); } }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><FORM><TABLE id=dyntab border=1> <TBODY> <TR id=tr0> <TD><INPUT onchange=altrow(0) value=Well size="20"></TD> <TD><INPUT onchange=altrow(0) value="Go on, try it." size="20"></TD></TR> <TR id=tr1> <TD><INPUT onchange=altrow(1) value="Go on." size="20"></TD> <TD><INPUT onchange=altrow(1) value="Why not?" size="20"></TD></TR> <TR id=tr2> <TD><INPUT onchange=altrow(2) size="20"></TD> <TD><INPUT onchange=altrow(2) size="20"></TD> </TR></TBODY></TABLE></FORM><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->