Creating a multiple row table in HTML dynamically

Question

I am trying to create a table where I want to input information about multiple number of profesors how will I be able to create multiple rows for inputting information

    <html>
    <form>
    <table border="2px">
    <TR>
    <TH>Professor Name</TH>
    <TH>DOB</TH>
    <TH>Professor Qualification</TH>
    <TH>Department</TH>
    <TH>Submit Action</TH>
    </TR>
    <TR>
    <TD>
    <input type="text" name="Professor Name">
    <TD>
    <input type="date" name="DOB">
    </TD>
    <TD>
    <input type="text" name="Professor Qualification"> 
    </TD>
    <TD>
    <Please Select Professor Department>
    <select name="Department">
    <option>Select</option>
    <option>Mechanical Engineering</option>
    <option>Electronics & Telecommunication</option>
    <option>Computer Science</option>
    <TD>
    <input type="submit" value="submit me">
    </TD>
    </TR>
    </form>
    </html>

Either I did not get the question or the person who just answered. If I am right you want to dynamically add rows to your table, is that correct? — Gacci, Aug 15 '15 at 08:47

score 1 · Answer 1 · edited Aug 17 '15 at 04:26

1

the script i am using

   <script type="text/javascript">
   function insRow()
   {
   //alert("came here");
   var x=document.getElementById('staff');
      // deep clone the targeted row
   var new_row = x.rows[1].cloneNode(true);
   // get the total number of rows
   var len = x.rows.length;
   // set the innerHTML of the first row 
   new_row.cells[0].innerHTML = len;

   // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

   // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

   // append the new row to the table
    x.appendChild( new_row );
    }

    </script>

edited Aug 17 '15 at 04:26

VARAAV

3
2

answered Aug 15 '15 at 08:50

Gacci

1,388
1
11
23

Thank you. I think this is the answer to my question but I need a submit button to each row thats all. – VARAAV Aug 15 '15 at 08:58
If you need a submit button to each row, then it would be a better idea to use ajax. Else you are going to end up submitting the whole table (which is what you currently have it set up as) – Gacci Aug 15 '15 at 09:01
wait a minute the code to add a new row works here but not in my browser even though i copy paste the same code and I'llhave read about how to add a seperate button for each row – VARAAV Aug 15 '15 at 09:30
add.addEventListener('click', function(e){ var row = staff.insertRow(); for(var c = 0; c <5; ++c){ var cell = row.insertCell(c); } }, false); doesn't fire – VARAAV Aug 15 '15 at 09:36
can any one tell why it is not adding a row in my browser possible cause I have gogle chrome??? – VARAAV Aug 15 '15 at 09:44
It does work, but the form is being submitted on clicking the button. That's why you see the row kind of flickering, because it does add the row but immediately after it submits the form, which it pretty much refreshing the page! – Gacci Aug 15 '15 at 19:15
Since the answer did not work I used following code which works but that just shows the new row after that it disappears – VARAAV Aug 17 '15 at 04:08
I posted a comment telling you that I re-edited it. It should work, I tested! – Gacci Aug 17 '15 at 04:10
The script with clone method works it just shows the second row and then that row disappears but Gacci your script somehow did not work for me i tried can u please look at the script I edited Thank you in advance – VARAAV Aug 17 '15 at 04:30
Alright son, you can either keep struggling or go with I provided you. I know that you mentioned it did not work, so I went back and fixed it. Tested it, and it worked just fine. Just copy/paste! – Gacci Aug 17 '15 at 04:33

score 0 · Answer 2 · edited May 23 '17 at 10:26

Add another <tr> with <td>s, and give your inputs a different name. If you use PHP, you need to add a [] after the base name, so that you'll be able to access the input data as an array.

<form action="submit.php" method="post">
    <table border="2">
        <tr>
            <th>Professor Name</th>
            <th>DOB</th>
            <th>Professor Qualification</th>
            <th>Department</th>
            <th>Submit Action</th>
        </tr>
        <tr>
            <td><input type="text" name="profName[]" placeholder="Professor Name" /></td>
            <td><input type="date" name="dob[]" /></td>
            <td><input type="text" name="profQual[]" placeholder="Professor Qualification" /></td>
            <td>
                &lt;Please Select Professor Department&gt;
                <select name="department[]">
                    <option>Select</option>
                    <option value="1">Mechanical Engineering</option>
                    <option value="2">Electronics & Telecommunication</option>
                    <option value="3">Computer Science</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="text" name="profName[]" placeholder="Professor Name" /></td>
            <td><input type="date" name="dob[]" /></td>
            <td><input type="text" name="profQual[]" placeholder="Professor Qualification" /></td>
            <td>
                &lt;Please Select Professor Department&gt;
                <select name="department[]">
                    <option>Select</option>
                    <option value="1">Mechanical Engineering</option>
                    <option value="2">Electronics & Telecommunication</option>
                    <option value="3">Computer Science</option>
                </select>
            </td>
        </tr>
        ... more trs ...
    </table>
    <input type="submit" name="submit" value="submit me" />
</form>

Creating a multiple row table in HTML dynamically

2 Answers2