Using javascript to create table rows containing form elements

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!

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>

---

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>

---

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.

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.

Quote:

---

Originally Posted by sleeper24

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 ?

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.

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

anyone be able to help me out with a function to remove a line thats been added?

Thanks

To remove it when? On which action? From where?

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

}

---

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>

---

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;
?>

---

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?

Quote:

---

Originally Posted by sudharshan1987

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