在添加的行中使用AJAX函数

时间:2015-04-18 14:41:24

标签: javascript php ajax function html-table

在我的页面中,用户可以点击按钮(添加问题)来添加新行 在每一行中,CLO值将根据关键字确定,他提供的函数CLO()将在选择章节后调用。我试图在每一行中调用CLO()函数并在该行中设置响应。 可能吗?

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

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

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

1 个答案:

答案 0 :(得分:0)

修改后的html

<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 id=0><td> 1</td><td> <input type="text" name="keyword"> </td> 
         <td> &nbsp;&nbsp; <select name="chapter" onchange="CLO(this.parentElement.parentElement.id)"> <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>

修改后的JS

 function addRow(tableID){
            var table=document.getElementById(tableID);
            var rowCount=table.rows.length;
            var row=table.insertRow(rowCount);
            row.id = Number(table.rows[rowCount-1].id)+1;
            var colCount=table.rows[1].cells.length;
            var cell1=row.insertCell(0);
            cell1.innerHTML= rowCount;
            for(var i=1;i<colCount;i++){
            var newcell=row.insertCell(i);
            newcell.innerHTML=table.rows[1].cells[i].innerHTML;
            }
  }
  function CLO(rowID) {
        var a=document.getElementsByName("keyword")[rowID].value;
        var b=document.getElementsByName("chapter")[rowID].value;
            console.log("marks = "+a +" chapter = "+b)
            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();
            }
     }