在我的页面中,用户可以点击按钮(添加问题)来添加新行
在每一行中,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> <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>
答案 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> <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"> </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();
}
}