Home/ Questions/Q 7367837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T03:35:16+00:00

function addRow(names,count) { deleteRow(); var table = dataTable; for(var i=0;i<count;i++) { var rowCount =

  • 0
function addRow(names,count) {

    deleteRow();
    var table = dataTable;

    for(var i=0;i<count;i++)
    {

         var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell2 = row.insertCell(0);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(1);
        var element2 = document.createElement('tr');
        var element3 = document.createElement('td');
        //element2.type = "text";
        element2.appendChild(element3)
        cell3.appendChild(element2);
        cell3.innerHTML = names[i];
        element3.attachEvent("test()", onclick);

    }
}

this is my code sample, i’m unable to attach event to either element2 or element3,
can anybody help me out, what the problem with this

this is the one more sample i tried out, it contains complete code..

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);
            element2.attachEvent("onclick",function(){ alert("event triggered"); });


        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    var index = table.rowIndex;
                    alert("index"+index);
                    //table.deleteRow(i);
                    //rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>
</HEAD>
<BODY>

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

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Logic and syntax error, heres the breakdown.

    cell3.appendChild(element2); // appends your element
cell3.innerHTML = names[i]; // deletes element2 and replaces it with names[i]

    element2 doesn’t exist because you set everything inside cell3 to be names[i] after you appended element2.

    You also need to update the event binding (IE)

    element3.attachEvent("onclick", function(){ /* code */ });
    • 0