CODEWITHSUNDEEP
javascriptjqueryhtml
Samir
Samir

Reputation: 121

Adding a row to a table

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.

Upvotes: 0

Views: 484

Answers (2)

Max Malyk
Max Malyk

Reputation: 860

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" />

Upvotes: 1

Gurminder Singh
Gurminder Singh

Reputation: 1755

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.

Upvotes: 1

Related Questions