<script language="javascript">
row_no=1;
function addRow(tbl,row){
//so that user can only add 3 rows
if(row_no<=3){
var textbox='<input type="text" name="textfield[]">';//for text box
var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a>'; //for the text which is used to remove the current row by using the function removeRow(..,..)
var tbl = document.getElementById(tbl);//to identify the table in which the row will get insert
var rowIndex = document.getElementById(row).value;//to identify the row after which the row will be inserted
try {
var newRow = tbl.insertRow(row_no);//creation of new row
var newCell = newRow.insertCell(0);//first cell in the row
newCell.innerHTML = text;//insertion of the 'text' variable in first cell
var newCell = newRow.insertCell(1);//second cell in the row
newCell.innerHTML = textbox + " " + remove;//insertion of the text box and the remove text using their variable
row_no++;
} catch (ex) {
alert(ex); //if exception occurs
}
}
if(row_no>3)//if the row contain 3 textbox, the add button will disapper
{
document.getElementById("add").style.display="none";
}
}
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);//adentification of table
try {
row_no--;
table.deleteRow(num);//deletion of the clicked row
} catch (ex) {
alert(ex);
}
if(row_no<=3)//if row is less than 3 then the button will again appear to add row
{
document.getElementById("add").style.display="block";
}
}
</script>
</head>
Gustavo Cruz wrote :1700
Your code crashes when you remove an input box in an
unnordened way, try this to check it out, first add the
1st, then the 2nd and finally the 3rd input box, then
remove the 3rd, then the 2nd and finally the 1st input
box, if you do this your code works correctly, but if you
remove any input box with no order, let say remove the
1st, then it crashes.
Justin Waggle wrote :1731
I made a little change to the removeRow function that
allows it to delete textfields out of sequence. Please let
me know if you implement this! - Justin
function removeRow(tbl,num)
{
var table = document.getElementById(tbl);//adentification of table
try {
if(num >= row_no){
row_no--;
table.deleteRow(row_no);//deletion of the clicked row
}else{
row_no--;
table.deleteRow(num);//deletion of the clicked row
}
} catch (ex) {
alert(ex);
}
if(row_no<=3)//if row is less than 3 then the button will again appear to add row
{
document.getElementById("Button").style.display="block";
}
}
Justin Waggle wrote :1732
Oops. I changed the element name at the bottom of my
example from "add" to "Button". Watch out for that! Using
the original example code above, it should still
be "add". -Justin
Jay G wrote :1761
Code works great but how would you go about adding a unique value to each new textfield?
Pavel Terentyev wrote :1762
TiABWTDI (There is A Better Way To Do It)
var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation
function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
// if it is first adding in this table setting initial rows count
initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Text field';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="X" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
try {
var newRow = tbl.insertRow(rows_count);
var newCell = newRow.insertCell(0);
newCell.innerHTML = text;
var newCell = newRow.insertCell(1);
newCell.innerHTML = input;
var newCell = newRow.insertCell(2);
newCell.innerHTML = remove;
} catch (ex) {
//if exception occurs
alert(ex);
}
}
function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
table.deleteRow(row.rowIndex);
} catch (ex) {
alert(ex);
}
}
</script>
</head>
