set unique ID when adding row dynamically

Question

SoMa_2 0 Newbie Poster

8 Years Ago

I'm trying to addrow onclick button, and I need that new row would have the diffrent ids for "keyword" and "chapter" so I can pass the values of these two field in CLO(key, chap)
I can only call the CLO() function in orginal row I need to be able to call it in added row and get that row keyword and chapter
this my code, could you please help me with the code .thank you

    <html><head>
    <script>
            function addRow(tableID){
        var table=document.getElementById(tableID);
         var rowCount=table.rows.length;
        var row=table.insertRow(rowCount);
        var colCount=table.rows[1].cells.length;
        var cell1=row.insertCell(0);
        cell1.innerHTML= rowCount+1;
        for(var i=0;i<colCount;i++){
        var newcell=row.insertCell(i+1);
        newcell.innerHTML=table.rows[1].cells[i+1].innerHTML;


        }}
    function CLO() {
    var a=document.getElementById("keyword").value;
    var b=document.getElementById("chapter").value;
        if (a == ""&& b == "") {
            document.getElementById("CLO").innerHTML = "";

            return;
        } else { 
         if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("CLO").innerHTML = xmlhttp.responseText;

                }
            }

           xmlhttp.open("GET","PLO.php?q1="+escape(a)+"&q2="+escape(b),true);
    xmlhttp.send();
        }
    }

        </script>
        </head><body><form>
        <input type="button" value="Add Question" onclick="addRow('dataTable')"><br> <br>

        <table id="dataTable" >
        <tr><th>Q</th><th>Keyword</th>
    <th>Chapter</th>
    <th>CLO</th> 
    <th> Marks</th></tr>
    <tr><td> 1</td><td> <input type="text" name="keyword" id="keyword" > </td> 
     <td> &nbsp;&nbsp; <select name="chapter" id="chapter" onchange="CLO()"> <option value="" >  </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

    </select></td>

    <td id="CLO"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>  </td>

    <td> <input type="text" name="Assess_Mark"> </td></tr>

    </table><form></body></html>

ajax javascript table

2 Contributors
3 Replies
10K Views
1 Day Discussion Span
Latest Post 8 Years Ago Latest Post by lps

All 3 Replies

lps 71 Posting Pro in Training

8 Years Ago

As from your code, newcell.innerHTML=table.rows[1].cells[i+1].innerHTML; this will duplicate the elements from the first row where the id of the elements will be duplicated as well. These result in the code for var a=document.getElementById("keyword").value; will always get the <input type="text" name="keyword" id="keyword" > of the first row and so as your b, and by selecting the other rows, it will goes into document.getElementById("CLO").innerHTML = "";.

If you asking my opinion, I will not suggesting duplicating the rows. As it will duplicate the data in CLO td as well.
But I will provide you a solution based on you current coding behavior. After your newcell.innerHTML=table.rows[1].cells[i+1].innerHTML;, add

if(newcell.children[0]){
    if(newcell.children[0].getAttribute('id')){
        var id = newcell.children[0].getAttribute('id');
        var new_id = id+"_"+rowCount;
        newcell.children[0].setAttribute('id',new_id);
    }
}

SoMa_2 commented: Thank you for the solution, I'm wondering, do I need to change anything in CLO () function to be able to use this solution. +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Thank you for the solution, I'm wondering, do I need to change anything in CLO () function to be able to use this solution.

SoMa_2 0 Newbie Poster · Answer 1 · 2015-04-20T18:09:11+00:00

@ips What you recommend me to do instead of duplicating the rows by the way I will then store the data in the database after user finish his questions

lps 71 Posting Pro in Training · Answer 2 · 2015-04-21T01:34:57+00:00

The codes need to changed to suit the solution above:
addRow

var newcell=row.insertCell(i+1);
newcell.innerHTML=table.rows[1].cells[i+1].innerHTML;
if(table.rows[1].cells[i+1].getAttribute('id')){
    var id = table.rows[1].cells[i+1].getAttribute('id');
    var new_id = id+"_"+rowCount;
    newcell.setAttribute('id',new_id);
}
if(newcell.children[0]){
    if(newcell.children[0].getAttribute('id')){
        var id = newcell.children[0].getAttribute('id');
        var new_id = id+"_"+rowCount;
        newcell.children[0].setAttribute('id',new_id);
    }
}

CLO(x)

var rowindex = x.parentNode.parentNode.rowIndex;
var ext = "";
if(rowindex != 1){
    ext = "_" + rowindex;
}
var k = document.getElementById("keyword" + ext);
var c = document.getElementById("chapter" + ext);
var a=document.getElementById("keyword" + ext).value;
var b=document.getElementById("chapter" + ext).value;
if (a == ""&& b == "") {
    document.getElementById("CLO" + ext).innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log("trace 0: "+document.getElementById("CLO" + ext));
            document.getElementById("CLO" + ext).innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","b.php?q1="+escape(a)+"&q2="+escape(b),true);
    xmlhttp.send();
}

html
<select name="chapter" id="chapter" onchange="CLO(this)">

The issue I raising for 'duplicating the first row' is as the concern after performing add a row, then perform CLO() on first row, then add another row. You will see the first row of data duplicated where the picklist,text value,CTO td text etc is totally duplicated.
As from what I will do is directly compose html script for the row and innerHTML to var row=table.insertRow(rowCount);

set unique ID when adding row dynamically

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers