Adding a row to a table

Question

I have written a code to add a new row dynamically on a click of a button. There are 5 columns.

The third column contain Two radio buttons, and on click of each radio button, new options appear. This Works Fine for the first row, but as soon as I click on the button to generate a new row problems start.

When I click on the radio button of the second row, options appear on the first row. Instead I want them to appear in that specific column.

Here is my code for adding a row

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length; 

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    } 
}

And this is my table

<TABLE id="dataTable"  border="1">
    <td><input type="text" id=1 /></td>
    <td><input type="text" id=2 /></td>

    <td>
        <input type="radio" name="radio1" value="1" onClick="toggleDisplay('mydiv','mydiv1');">Own
        <input type="radio" name="radio2" value="1" onClick="toggleDisplay1('mydiv','mydiv1');">Contractor

        <div id="mydiv" style="display:none;">
            <input type="radio" name="Wage" value="Wage">Wage Board
            <input type="radio" name="Staff" value="Staff">Staff
        </div>

        <div id="mydiv1" style="display:none;">
            Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" >
            <input type="radio" name="No" >No of Workmen
        </div>
    </td>

    <td><input type="text"  id=5  /></td>
    <td><input type="text"  id=4  /></td>

    </tr>
</TABLE>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

Please help me out on this one as soon as possible. I think the problem is with unique ids.

Try to use jQuery clone function. Like: $("#" + tableID).append($("#" + tableID + " tbody tr:first").clone());. And learn what structure table have. — ostapische
– ostapische, Commented Sep 26, 2013 at 13:07
With the missing <tr> start tag, your table technically doesn't contain any rows. Anyway, if you already know the problem is with duplicate ids, what have you tried to make sure the ids are unique? — Mr Lister
– Mr Lister, Commented Sep 26, 2013 at 13:31

Gurminder Singh · Accepted Answer · 2013-09-26 13:47:11Z

1

You will have to give dynamic IDs to your newly generated elements so as to do operations on them. Besides, you can also clone elements in pure javascript with cloneNode().

UPDATE

 var tr3=document.getElementById(tableid).getElementsByTagName('tr')[1].cloneNode(true);
 tr3.setAttribute("id","tempCommentId");
 tr3.getElementsByTagName('td')[1].innerHTML=Comment;

 document.getElementById(tableid).appendChild(tr3);

Like this, this is just for example. This is one of my working code snippet with cloning.

edited Sep 26, 2013 at 13:47

answered Sep 26, 2013 at 13:26

Gurminder Singh

1,75516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Max Malyk · Accepted Answer · 2013-09-26 13:50:07Z

Check out this working Fiddle.

The way you currently have it, every time toggleDisplay or toggleDisplay1 is called - it sends same 'mydiv' and 'mydiv1' parameters. What it should do instead is it has to find options inside same row.

toggleDisplay = function() {
    var target = event.target || event.srcElement;
    $(target).closest("td").find("div").hide();
    $(target).closest("td").find("div:eq("+$(target).index("input[name="+$(target).attr("name")+"]")+")").toggle();
};

To add a new row you could clone the first row:

addRow = function(tableID) {
    var table = document.getElementById(tableID);
    var oClone = table.rows[0].cloneNode(true);
    $(oClone).find("input[type=radio]").each(function(){
        $(this).attr("name", "radio"+table.rows.length);
    });
    $(oClone).find("div").hide();
    table.insertBefore(oClone);
};

Also your radio buttons have different names, thus they are not behaving properly:

<TABLE id="dataTable"  border="1">
    <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>

    <td>
        <input type="radio" name="radio0" onClick="toggleDisplay();"/>Own
            <input type="radio" name="radio0"  onClick="toggleDisplay();"/>Contractor

        <div style="display:none;">
            <input type="radio" name="Wage" value="Wage"/>Wage Board
            <input type="radio" name="Staff" value="Staff"/>Staff
        </div>

        <div style="display:none;">
            Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" />
            <input type="radio" name="No" />No of Workmen
        </div>
    </td>

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

    </tr>
</TABLE>
<input type=button onclick="addRow('dataTable')" value="add row" />

The following can be solved using Jquery I guess.But i dont have that much grasp on Jquery.That's Why i include JQUERY tag
I still didnt get how to do this..because i am not comfortable with jquery..Can u suggest something more which might be helpful to me
Include "code.jquery.com/jquery-1.10.2.min.js" script on your page and use the code that i provided. Check out this working example - jsfiddle.net/maximua/3RP94.

Collectives™ on Stack Overflow

Adding a row to a table

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related