Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tạo bảng
URL: https://www.javascriptbank.com/dynamic-table-2.html
Bạn có thể dùng đoạn mã JavaScript này để tạo các bảng theo mục đích của mình. Bạn có thể kết hợp với các hiệu ứng khác để làm cho bảng tạo ra trông thân thiện và bắt mắt hơn.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tạo bảng
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-->