»
EnglishFrenchVietnamese

Print - Dynamic Table - JavaScriptBank.com

Full version: jsB@nk » Form » Table » Dynamic Table
URL: https://www.javascriptbank.com/dynamic-table-2.html

Dynamic Table © JavaScriptBank.comEnter 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



CSS
<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-->


JavaScript
<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-->


HTML
<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-->