本文介绍了在添加的行使用AJAX功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的页面用户可以点击按钮（增加的问题）来添加新行在每一行CLO值将决定基于关键字和章节，他提供的功能 CLO（）将选择章节后调用。我想打电话给每一行 CLO（）功能，并设置该行的响应。可能吗。
＆LT; HTML＆GT;＆LT; HEAD＆GT;
＆LT;脚本＆GT;
功能addRow（TABLEID）{
无功表=的document.getElementById（TABLEID）;
VAR rowCount等= table.rows.length;
VAR行= table.insertRow（rowCount等）;
变种colCount = table.rows [1] .cells.length;
变种CELL1 = row.insertCell（0）;
cell1.innerHTML = rowCount等+ 1;
对于（VAR I = 0; I＆LT; colCount;我++）{
变种newcell = row.insertCell第（i + 1）;
newcell.innerHTML = table.rows [1] .cells [I + 1] .innerHTML;
}}
功能CLO（）{
VAR一个=的document.getElementById（关键字）的价值。
。VAR B =的document.getElementById（章）值;
如果（一个==与＆amp;和b ==）{
。的document.getElementById（CLO）的innerHTML =;
返回;
} 其他 {
如果（window.XMLHtt prequest）{
// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
XMLHTTP =新XMLHtt prequest（）;
} 其他 {
// code对IE6，IE5
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
的document.getElementById（CLO）的innerHTML = xmlhttp.responseText。
}
}
xmlhttp.open（GET，PLO.php Q1 =？+越狱（一）+＆放大器; Q2 =+越狱（B），TRUE）;
xmlhttp.send（）;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体GT;＆LT;形式GT;
＆LT;输入类型=按钮值=添加问题的onclick =addRow（'的dataTable'）＆GT;＆LT; BR＆GT; ＆LT; BR＆GT;
＆LT;表ID =dataTable的＆GT;
＆LT; TR＆GT;＆LT;第i个Q＆LT; /第i个百分位＆GT;关键字＆LT; /第i个
百分位＆GT;第二章＆LT; /第i个
百分位＆GT; CLO＆LT; /第i个
＆LT;第i个马克斯＆LT; /第i;＆LT; / TR＆GT;
＆其中; TR＆GT;＆其中; TD＆GT; 1所述; / TD＆GT;＆其中; TD＆GT; ＆LT;输入类型=文本名称=关键词ID =关键词＆GT; ＆LT; / TD＆GT;
＆LT; TD＆GT; ＆功放; NBSP;＆安培; NBSP; ＆LT;选择名称=章ID =章的onchange =CLO（）＆GT; ＆LT;期权价值=＆GT; ＆LT; /选项＆GT;
＆LT;期权价值=1＆GT; 1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT;期权价值=3＆GT;第3版; /选项＆GT;
＆LT;期权价值=4＆GT; 4℃/选项＆GT;
＆LT; /选择＆GT;＆LT; / TD＆GT;
＆所述; TD的id =CLO＆GT; ＆LT; / TD＆GT; ＆LT; / TD＆GT;
＆LT; TD＆GT; ＆LT;输入类型=文本名称=Assess_Mark＆GT; ＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;＆LT;形式GT;＆LT; /身体GT;＆LT; / HTML＆GT;
解决方案
的修改后的HTML
＆LT;身体GT;＆LT;形式GT;
＆LT;输入类型=按钮值=添加问题的onclick =addRow（'的dataTable'）＆GT;＆LT; BR＆GT; ＆LT; BR＆GT;
＆LT;表ID =dataTable的＆GT;
＆LT; TR＆GT;＆LT;第i个Q＆LT; /第i个百分位＆GT;关键字＆LT; /第i个
百分位＆GT;第二章＆LT; /第i个
百分位＆GT; CLO＆LT; /第i个
＆LT;第i个马克斯＆LT; /第i;＆LT; / TR＆GT;
＆所述; TR的id = 0＆GT;＆其中; TD＆GT; 1所述; / TD＆GT;＆其中; TD＆GT; ＆LT;输入类型=文本名称=关键词＆GT; ＆LT; / TD＆GT;
＆LT; TD＆GT; ＆功放; NBSP;＆安培; NBSP; ＆LT;选择名称=章的onchange =CLO（this.parentElement.parentElement.id）＆GT; ＆LT;期权价值=＆GT; ＆LT; /选项＆GT;
＆LT;期权价值=1＆GT; 1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT;期权价值=3＆GT;第3版; /选项＆GT;
＆LT;期权价值=4＆GT; 4℃/选项＆GT;
＆LT; /选择＆GT;＆LT; / TD＆GT;
＆所述; TD的id =CLO＆GT; </td> ＆LT; / TD＆GT;
＆LT; TD＆GT; ＆LT;输入类型=文本名称=Assess_Mark＆GT; ＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;＆LT;形式GT;＆LT; /身体GT;
修改后的JS
函数addRow（TABLEID）{
无功表=的document.getElementById（TABLEID）;
VAR rowCount等= table.rows.length;
VAR行= table.insertRow（rowCount等）;
row.id数=（table.rows [rowCount等-1] .ID）+1;
变种colCount = table.rows [1] .cells.length;
变种CELL1 = row.insertCell（0）;
cell1.innerHTML = rowCount等;
对于（VAR I = 1; I＆LT; colCount;我++）{
变种newcell = row.insertCell（ⅰ）;
newcell.innerHTML = table.rows [1] .cells [I] .innerHTML;
}
}
功能CLO（ROWID）{
VAR一个= document.getElementsByName（关键字）[ROWID] .value的;
变种B = document.getElementsByName（章）[ROWID] .value的;
的console.log（标记=+ A +一章=+ B）
如果（一个==与＆amp;和b ==）{
。的document.getElementById（CLO）的innerHTML =;
返回;
} 其他 {
如果（window.XMLHtt prequest）{
// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
XMLHTTP =新XMLHtt prequest（）;
} 其他 {
// code对IE6，IE5
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
的document.getElementById（CLO）的innerHTML = xmlhttp.responseText。
}
}
xmlhttp.open（GET，PLO.php Q1 =？+越狱（一）+＆放大器; Q2 =+越狱（B），TRUE）;
xmlhttp.send（）;
}
}
In my page user can click on button (add question) to add new row In each row CLO value will be determine based on Keyword and chapter he provide function CLO() will be call after selecting the chapter. I'm trying to call CLO() function in each row and set the response in that row.Is it possible.
<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>
解决方案
The Modified 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>
The modified 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();
}
}
这篇关于在添加的行使用AJAX功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！