www.webdeveloper.com
Page 7 of 7 FirstFirst ... 567
Results 91 to 93 of 93

Thread: Using javascript to create table rows containing form elements

  1. #91
    Join Date
    Apr 2011
    Posts
    6
    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>

  2. #92
    Join Date
    Apr 2011
    Posts
    6
    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>

  3. #93
    Join Date
    Jan 2013
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles