0

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>
2
Contributors
3
Replies
32
Views
2 Years
Discussion Span
Last Post by lps
1

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);
    }
}
Votes + Comments
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

@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

1

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);

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.