www.webdeveloper.com
Page 5 of 7 FirstFirst ... 34567 LastLast
Results 61 to 75 of 93

Thread: Using javascript to create table rows containing form elements

  1. #61
    Join Date
    Jul 2009
    Posts
    1
    THanks for the code, KOR, you are amazing. Been searching internets for a while, and this is the best [and the only good one] so far. Many thanks!

  2. #62
    Join Date
    Aug 2009
    Location
    Earth, Solar System
    Posts
    11
    Kor,

    I've seen the code you have for a form, however that was only for a row.

    I have this simple form, and inside of that form I have a table with multiple rows and columns. The user enters and selects information they need to. Once done if they need another table, they can click on add and it will add another table inside of that form. If they click on delete it would remove the last table inserted.

    How can I use your JS code to implement this? Any help is greatly appreciated.

    My form code:
    Code:
    <form name="gj" id="gj" method="post" action="">
    	<table id="nogap">
    		<tbody>
    			<tr id="headrow">
    				<th><b><u> Date </u></b></th>
    				<th></th>
    				<th><b><u> Account </u></b></th>
    				<th></th>
    				<th><b><u> Credit </u></b></th>
    				<th></th>
    				<th><b><u> Debit </u></b></th>
    			</tr>
    			<tr>
    				<td>
    				        <input type="text" size="8" maxlength="10"> 
    				</td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td>
    					<select name="options" onClick="">
    						<option value="empty">
    						<option value="Cash">Cash
    						<option value="Accounts Receivable">Accounts Receivable
    						<option value="Inventory">Inventory
    						<option value="PPE">Property, Plant, & Equipment
    						<option value="Accounts Payable">Accounts Payable
    					</select>
    				</td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td> $ <input type="text" size="10" maxlength=15> </td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td> </td>
    			</tr>
    			<tr class="oddline">
    				<td>&nbsp;</td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td>
    					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    					<select name="options" onClick="">
    						<option value="empty">
    						<option value="Cash">Cash
    						<option value="Accounts Receivable">Accounts Receivable
    						<option value="Inventory">Inventory
    						<option value="PPE">Property, Plant, & Equipment
    						<option value="Accounts Payable">Accounts Payable
    					</select>
    				</td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td> </td>
    				<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    				<td> $ <input type="text" size="10" maxlength="15"> </td>
    			</tr>
    			<tr>
    				<td> </td>
    				<td> </td>
    				<td> ( <input type="text" size="31" maxlength="45"> ) </td>
    				<td> </td>
    				<td> </td>
    				<td> </td>
    				<td> </td>
    			</tr>
    			<tr>
    				<td><hr></td> <td><hr></td> <td><hr></td> <td><hr></td> <td><hr></td>
    				<td><hr></td> <td><hr></td> 
    			</tr>
    		</tbody>
    	</table>
    	<div id = addon1>
    		<input name="add" type="button" value="Add Acct" onclick="" />
    		<input name="remove" type="button" value="Remove Acct" onclick="" />
    		<input name="post" type="button" value="Post to GL" onclick="" />
    	</div>
    </form>

  3. #63
    Join Date
    Aug 2009
    Location
    Earth, Solar System
    Posts
    11
    Kor,

    I solve the adding portion but when click add for the first time, it throws the original table off alignment. Everything table you insert after that is align correctly beneath the first one added.

    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">
                var clone;
                function cloneRow(){
                    var rows = document.getElementById('nogap').getElementsByTagName('tbody');
                    var index = rows.length;
                    clone = rows[index - 1].cloneNode(true);
                    var inputs = clone.getElementsByTagName('input'), inp, i = 0;
                    
    				while (inp = inputs[i++]) {
                        inp.name = inp.name.replace(/\d/g, '') + (index + 1);
                    }
                }
                
                function addRow(){
                    var tbo = document.getElementById('nogap').getElementsByTagName('tbody')[0];
                    tbo.appendChild(clone);
                    cloneRow();
                }
                
                onload = cloneRow;
            </script>
        </head>
        <body>
            <div id="accttransaction">
    			<form name="gj" id="gj" method="post" action="">
    				<table id="nogap">
    					<tbody>
    						<tr id="headrow">
    							<th><b><u> Date </u></b></th>
    							<th></th>
    							<th><b><u> Account </u></b></th>
    							<th></th>
    							<th><b><u> Credit </u></b></th>
    							<th></th>
    							<th><b><u> Debit </u></b></th>
    						</tr>
    						<tr>
    							<td>
    								<input type="text" size="8" maxlength="10"> 
    							</td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td>
    								<select name="options" onClick="">
    									<option value="empty">
    									<option value="Cash">Cash
    									<option value="Accounts Receivable">Accounts Receivable
    									<option value="Inventory">Inventory
    									<option value="PPE">Property, Plant, & Equipment
    									<option value="Accounts Payable">Accounts Payable
    								</select>
    							</td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td> $ <input type="text" size="10" maxlength=15> </td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td> </td>
    						</tr>
    						<tr class="oddline">
    							<td>&nbsp;</td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    								<select name="options" onClick="">
    									<option value="empty">
    									<option value="Cash">Cash
    									<option value="Accounts Receivable">Accounts Receivable
    									<option value="Inventory">Inventory
    									<option value="PPE">Property, Plant, & Equipment
    									<option value="Accounts Payable">Accounts Payable
    								</select>
    							</td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td> </td>
    							<td> &nbsp;&nbsp;&nbsp;&nbsp; </td>
    							<td> $ <input type="text" size="10" maxlength="15"> </td>
    						</tr>
    						<tr>
    							<td> </td>
    							<td> </td>
    							<td> ( <input type="text" size="31" maxlength="45"> ) </td>
    							<td> </td>
    							<td> </td>
    							<td> </td>
    							<td> </td>
    						</tr>
    						<tr>
    							<td><hr></td> <td><hr></td> <td><hr></td> <td><hr></td> <td><hr></td>
    							<td><hr></td> <td><hr></td> 
    						</tr>
    					</tbody>
    				</table>
    				<!-- ############### add/remove accounts or Post to GL ################ -->
    				<div id = addon1>
    					<input name="add" type="button" value="Add Acct" onclick="addRow()" />
    					<input name="remove" type="button" value="Remove Acct" onclick="" />
    					<input name="post" type="button" value="Post to GL" onclick="" />
    				</div>
    			</form>	
    		</div>
        </body>
    </html>

  4. #64
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Now, if you changed the code in order to clone a TBODY element, make sure you will append the clone to the TBODY's parent which is the TABLE element.
    Code:
    function addRow(){
                    var tab = document.getElementById('nogap');
                    tab.appendChild(clone);
                    cloneRow();
                }
    - remove the tr's id (<tr id="headrow">). You don't need it and it is is illegal to have more than a single element with the same id.

  5. #65
    Join Date
    Aug 2009
    Location
    Earth, Solar System
    Posts
    11
    Can I turn the <tr id="headrow"> to <tr class="headrow"> Because I need this row to align correctly? Thanks by the way, and do you have any pointers on how to go about deleting the row just inserted.
    Last edited by sleeper24; 08-10-2009 at 06:22 PM.

  6. #66
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by sleeper24 View Post
    and do you have any pointers on how to go about deleting the row just inserted.
    Can you detail a little bit? You want a button, or something to delete a particular row/tbody ?

  7. #67
    Join Date
    Aug 2009
    Location
    Earth, Solar System
    Posts
    11
    Kor,

    The code I have solved up above on adding multiple row at once that you help me correct it.

    I want to delete all those rows that was added if the button delete was clicked.

  8. #68
    Join Date
    Jan 2010
    Posts
    3
    Hi,
    Has anyone got a function to remove a added row? The examples above are perfect for me just i dont fully understand how to add a bit to remove a row thats been added.

    Many thanks
    Paul

  9. #69
    Join Date
    Jan 2010
    Posts
    3
    anyone be able to help me out with a function to remove a line thats been added?

    Thanks

  10. #70
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    To remove it when? On which action? From where?

  11. #71
    Join Date
    Jan 2010
    Posts
    3
    Thanks for the reply Kor,

    I need some help to add a function to remove a row thats been added. say if a user adds a row but then would like to remove it before the form is submitted. So there would be a link on the side of every row added. im assuming this is possible but wouldnt know, very new to playing with javascript

    Code:
    function delRow() {
    
    BLAH BLAH
    
    }

  12. #72
    Join Date
    Feb 2010
    Posts
    1
    Hello,

    i'm in need of help with adding some rows to a table, i saw the script from Kor and is its very interesting but i'm not able to integrate with my table. Here is the table i have:
    Code:
    <table id="" cellspacing="1" class="tablesorter">
              <thead>
                <tr>
                  <th class="center">Nr. crt</th>
                  <th class="center">Denumire</th>
                  <th class="center">Document justificativ Denumire/ nr./ data</th>
                  <th class="center">UM</th>
                  <th class="center">Cant</th>
                  <th class="center">Valoare totala (lei)</th>
                  <th class="center">Valoare decontata din bugetul proiectului (lei)</th>
                </tr>
              </thead>
              <tr>
                <td class="center">1</td>
                <td><input name="denumire1" type="text" id="denumire1" value="" /></td>
                <td><input name="doc1" type="text" id="doc1" value="" /></td>
                <td><input name="um1" type="text" id="um1" value="" /></td>
                <td><input name="cant1" type="text" id="cant1" value="" /></td>
                <td><input name="val1" type="text" id="val1" value="" /></td>
                <td><input name="bug1" type="text" id="bug1" value="" /></td>
              </tr>
              <tr>
                <td class="center">2</td>
                <td><input name="denumire2" type="text" id="denumire2" value="" /></td>
                <td><input name="doc2" type="text" id="doc2" value="" /></td>
                <td><input name="um2" type="text" id="um2" value="" /></td>
                <td><input name="cant2" type="text" id="cant2" value="" /></td>
                <td><input name="val2" type="text" id="val2" value="" /></td>
                <td><input name="bug2" type="text" id="bug2" value="" /></td>
              </tr>
              <tr>
                <td colspan="5"><strong>TOTAL MATERIALE CONSUMABILE, PIESE DE SCHIMB:</strong></td>
                <td width="97">&nbsp;</td>
                <td width="165">&nbsp;</td>
              </tr>
            </table>

  13. #73
    Join Date
    Feb 2010
    Posts
    1

    need help in accessing data from dynamically generated table

    Hai KOR & everyone
    Iam a newbie to javascript. I am developing an application which involves computation based on the user input .
    The design is like this : I have a html page with javascript in which tables are dynamically generated(using your clone code), whenever user wants to add another table and give input into it . I am attaching the code here .After submiting, the values are passed to a php page where computation is done based on the input values.
    The problem realy starts here like how to access data individualy from javascript which are POSTED to a php page .Please I need your help .
    The html page is
    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">
    var clone;
    function cloneRow(){
    var rows=document.getElementById('mytab').getElementsByTagName('tr');
    var index=rows.length;
    clone=rows[index-1].cloneNode(true);
    var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
    while(inp=inputs[i++]){
    inp.name=inp.name.replace(/\d/g,'')+(index+1);
    }
    }
    function addRow(){
    var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
    tbo.appendChild(clone);
    cloneRow();
    }
    onload=cloneRow;
    </script>
    </head>
    <body>
    <form action="m_approach2.php"  method="post">
    <table id="mytab">
     <tr>
        <td><div align="center">sigma2</div></td>
        <td><div align="center">sigma4</div></td>
        <td><div align="center">sigma5</div></td>
        <td><div align="center">sigma7</div></td>
        <td><div align="center">sigma9</div></td>
        <td><div align="center">sigma10</div></td>
        </tr>
      <tr>
        <td>
          <input name="input2[]" type="text"  size="5" />//is this correct? is input2[0] = value of what user entered in the first column of the second row?
          </td>
        <td>
          <input name="input4[]" type="text" size="5"   />
          </td>
        <td>
          <input name="input5[]" type="text" size="5" />
          </td>
        <td>
          <input name="input7[]" type="text" size="5" />
          </td>
        <td>
          <input name="input9[]" type="text" size="5" />
          </td>
        <td>
          <input name="input10[]" type="text" size="5" />
          </td>
    </table>
    <br>
    <input type="button" value="Add a new row" onclick="addRow()">
    <input name="" type="submit" value="Submit" />
    </form>
    </body>
    </html>
    My php page is smthin like this
    m_approach2.php is
    Code:
    <?php
    set_time_limit(0);
    $in=$_POST["input0"];//how to get all the inputed value in the variable?
    $in0=$_POST["input"];
    $in4=$_POST["input4"];
    $in5=$_POST["input5"];
    $in6=1-$in5;
    $in7=$_POST["input7"];
    $in3=1-$in4-$in7;
    $in9=$_POST["input9"];
    $in8=1-$in9;
    $in10=$_POST["input10"];
    $in11=1-$in10;
    ?>
    Last edited by Kor; 03-10-2010 at 03:31 AM. Reason: wrap the code [code][/code]

  14. #74
    Join Date
    Mar 2010
    Posts
    1

    Multiple tables

    Ok, I have an interesting twist to the code for you Kor. I need to be able to have 3 separate add row buttons on the same page that each would be pulling a different set of variables. How would I change your code to do that? I don't really know javascript, but they want me to change a paper to be online with some changes. Any ideas?

  15. #75
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by sudharshan1987 View Post
    The problem realy starts here like how to access data individualy from javascript which are POSTED to a php page .
    You may use AJAX:
    http://en.wikipedia.org/wiki/Ajax_%28programming%29
    http://www.w3schools.com/Ajax/Default.Asp

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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