Using javascript to create table rows containing form elements

**laptopalias** · 04-28-2011, 11:00 AM

Like this? Firebug's giving me an error:

document.getElementById(tabid) is null
var root = document.getElementById(tab...ntsByTagName('tbody')[0]; //the root

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*<![CDATA[*/
function addRow(tabid){
var root = document.getElementById(tabid).getElementsByTagName('tbody')[0]; //the root
var allRows = root.getElementsByTagName('tr');//the rows' collection
var cRow = allRows[0].cloneNode(true)//the clone of the 1st row
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
root.appendChild(cRow);//appends the cloned row as a new row
}
function shownames(){
var allInp=document.getElementsByTagName('input');
for(var i=0;i<allInp.length;i++){
alert(allInp[i].name)
}
}
/*]]>*/
</script>
</head>
<body>
<form action="" method="get">
  <table width="766"  border="0" cellspacing="0" cellpadding="0" id="myTab">
    <tr>
      <td width="191"><input type="text" name="textfield_a" /></td>
      <td width="191"><input type="text" name="textfield_b" /></td>

      <td width="98"><select name="select">
        <option value="item1" selected="selected">item1</option>
        <option value="item2">item2</option>
        <option value="item3">item3</option>
        <option value="item4">item4</option>
        <option value="item5">item5</option>

      </select></td>
      <td width="286"></td>
    </tr>
  </table><br />
  <input name="addARow" type="button" value="Add a Row" onclick="addRow('mytab1')">
  <br />
  <br />
  <input name="submit" type="submit" value="Submit" />
        <br />
        <br />
<input name="button" type="button" onclick="shownames()" value="Show names">
</form>
</body>
</html>

**laptopalias** · 04-29-2011, 07:14 PM

OK, this is much more along the lines of what I was after; hope it helps someone else...

Code:

<form>
<table id = 1>
          <thead>

          <tr>

          <th>Mon 25/04/11</th>

          <th>Project</th>

          <th>Description</th>

          </tr>

          </thead>

          <tbody>
          <tr><td></td>

          <td><select>

<option>project 1</option>

<option>project 2</option>

<option>project 3</option>

<option>project 4</option>

<option>project 5</option>

</select></td>

          <td><input type = 'text'/></td>

          </tr>

          </tbody>
          </table>
<p>
<input type='button' value='Add' onclick='addRowClone(1);' />
</p> <table id = 2>
          <thead>

          <tr>

          <th>Tue 26/04/11</th>

          <th>Project</th>

          <th>Description</th>

          </tr>

          </thead>

          <tbody>
          <tr><td></td>

          <td><select>
<option>project 1</option>

<option>project 2</option>

<option>project 3</option>

<option>project 4</option>

<option>project 5</option>

</select></td>

          <td><input type = 'text'/></td>

          </tr>

          </tbody>
          </table>
<p>
<input type='button' value='Add' onclick='addRowClone(2);' />
</p> <table id = 3>
          <thead>

          <tr>

          <th>Wed 27/04/11</th>

          <th>Project</th>

          <th>Description</th>

          </tr>

          </thead>

          <tbody>

          <tr><td></td>

          <td><select>
<option>project 1</option>

<option>project 2</option>

<option>project 3</option>

<option>project 4</option>

<option>project 5</option>

</select></td>

          <td><input type = 'text'/></td>

          </tr>

          </tbody>
          </table>
<p>
<input type='button' value='Add' onclick='addRowClone(3);' />

</p> <table id = 4>
          <thead>

          <tr>

          <th>Thu 28/04/11</th>

          <th>Project</th>

          <th>Description</th>

          </tr>

          </thead>

          <tbody>
          <tr><td></td>

          <td><select>
<option>project 1</option>

<option>project 2</option>

<option>project 3</option>

<option>project 4</option>

<option>project 5</option>

</select></td>

          <td><input type = 'text'/></td>

          </tr>

          </tbody>
          </table>
<p>
<input type='button' value='Add' onclick='addRowClone(4);' />
</p> <table id = 5>
          <thead>

          <tr>

          <th>Fri 29/04/11</th>

          <th>Project</th>

          <th>Description</th>

          </tr>

          </thead>

          <tbody>
          <tr><td></td>

          <td><select>
<option>project 1</option>

<option>project 2</option>

<option>project 3</option>

<option>project 4</option>

<option>project 5</option>

</select></td>

          <td><input type = 'text'/></td>

          </tr>

          </tbody>
          </table>

<p>
<input type='button' value='Add' onclick='addRowClone(5);' />
</p> </form>

<script>
function addRowClone(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}
</script>

**almohada** · 01-29-2013, 10:20 PM

Sorry for reviving this old thread. I am trying to add some data of the selected items in a a text field , but am not able to do that, as data from the first select keeps repeating. I dont have much knowledge of JavaScript. Will greatly appreciate any help.

Here is a sample of what I am trying to do with another script included:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	


<script type="text/javascript">  
 $(document).ready(function() {                                       
    $("#dataTable").live("change", function() {
      $("[name^=price]").val($(this).find("option:selected").attr("data-price"));
    })
 });                                     
 </script>
 
 
<script type="text/javascript">
var clone;
function cloneRow(){
var rows=document.getElementById('dataTable').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByName('price'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('dataTable').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
onload=cloneRow;
</script>


</head>
<body>
<form name="f1" action="" />
            <input type="hidden" name="subject" value="Order" />
            <input type="hidden" name="mail_options" value="NoEmpty" />

<table width="60%" border="1" cellspacing="1">
                            <tr>
                                <td width="25%"><b><font color="purple">Category A</b>
                                    </font>
                                </td>
                                <td>
                                    <table width="95%" border="1" cellpadding="1">
                                        <thead>
                                            <tr>
                                                <th width="5%"></th>
                                                <th width="10%">Qty.</th>
                                                <th width="80%">Your Choice</th>
                                            </tr>
                                        </thead>
                                    </table>    
 
    <TABLE id="dataTable" width="95%" border="1" cellspacing="1">
	<tbody>
        <TR>
            <TD width="10%"><input type="text" name="cantEnt[]" size="2" maxlength="2" alt="Please enter quantity"
                                                title="Please enter quantity" onKeyPress="return numbersonly(this, event)" /></TD>
            <TD width="80%">
                <select name="Ent[]">
					<optgroup label="Cat A">
						<option value=""></option>
						<option value="A"data-price="1.00">First</option>
						<option value="B"data-price="2.00">Second</option>
						<option value="C"data-price="3.00">Third</option>
						
					</optgroup>
				</select>
				</TD><td><input type="text" id="price" name="price" value="" readonly></td>
            </TR>
		
    </TBODY>
    </TABLE>
	
	
<br>
<input type="button" value="Add a new row" onclick="addRow()">
<td align="center">
 <BUTTON TYPE=SUBMIT style="color: brown;"><STRONG>Send It</STRONG></BUTTON></td>
</form>
</body>
</html>

Thread: Using javascript to create table rows containing form elements

Thread Tools

Display

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions