今天在动态的实现一个试题修改工能时,学习到了一些动态处理页面元素的技能,在这里记录总结。
效果如图:
本页面,答案项部分代码如下:
<s:if test='%{qsbknewQuestionPage.qsbkQuestion.questionType =="1" || qsbknewQuestionPage.qsbkQuestion.questionType =="2"}'>
<tr>
<td colspan="6">
<table width="100%" height="100%" class="common" id="answerList">
<tr>
<td class="centerTitleTd" width="85%" ><a:i18n name="qsbk.answerOption"/></td>
<td class="centerTitleTd" width="15%" ><input type='button' class='button19' value='+' onclick='insertRows();'/></td>
</tr>
<s:iterator value="qsbknewQuestionPage.qsbkQuestion.qsbkAnswers" id="qsbkAnswer">
<tr>
<td>
<textarea class='mustInput' onchange='common.checkTextarea(this,2000,false);' onkeyUp='common.checkTextarea(this,2000,false);' name='qsbknewQuestionPage.qsbknewAnswerPage.qsbkAnswer.answers' id='crm_qsbk_answer' type="_moz" style="word-wrap: break-word; word-break: break-all;"/>${qsbkAnswer.answers }</textarea>
</td>
<td class="centerContentTd">
<input type='button' class='button19' value='-' onclick='javascript:removeTableRow(this.parentNode.parentNode)'/>
</td>
</tr>
</s:iterator>
</table>
</td>
</tr>
</s:if>
本操作是一个对已有试题的修改操作,所以前两个选项是从数据库中查询出来的,那么现在如果我要增加一行,该如何实现呢?看下面:
function insertRows(){
var answerList = document.getElementById("answerList");
var TR=answerList.insertRow();
var TD1 = TR.insertCell(), TD2 = TR.insertCell();
TR.bgColor="#f4f9ff";
TD2.align='left'
TD1.innerHTML="<textarea class='mustInput' onchange='common.checkTextarea(this,2000,false);' onkeyUp='common.checkTextarea(this,2000,false);' name='qsbknewQuestionPage.qsbknewAnswerPage.qsbkAnswer.answers' id='crm_qsbk_answer' style='word-wrap: break-word; word-break: break-all;'/></textarea>";
TD2.innerHTML="<input type='button' onchange='common.checkTextarea(this,2000,false);' onkeyUp='common.checkTextarea(this,2000,false);' class='button19' value='-' onclick='javascript:removeTableRow(this.parentNode.parentNode)'/>";
}
</script>
是不是很简单,这就是简单的操作元素,那么当删除行的时候呢?
function removeTableRow(row){
var oTable = document.getElementById("answerList");
var oTBody = oTable.tBodies[0];
var aTRs = new Array;
oTBody.removeChild(row);
var colDataRows = oTBody.rows;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++){
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
删除行的时候,主要是定位到所要删除的行,我们观察删除操作的事件:
那么removeTableRow(this.parentNode.parentNode)的参数代表什么意思呢
this代码当前input,this.parentNode代码其父节点td,this.parentNode.parentNode代码td的父节点,
这样就定为到了这一行tr
删除这一行就可以了。
其中还用到了document.createDocumentFragment(),再简单的说一个它:
**createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点**
有兴趣可以执行一下这段代码体会一下:
<!DOCTYPE html>
<html>
<body>
<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">Click the button to make changes to a list item, using the createDocumentFragment method, then appending the list item as the last child of the list.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var d=document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("UL")[0].appendChild(d);
};
</script>
</body>
</html>
ps:如果我想重置操作怎么办呢,就是我修改了又想撤销修改怎么实现呢?
function resetForm(){
fm.reset();//注意先将输入的文本清除,再根据内容删除追加的行
var txtareas = document.getElementsByName("qsbknewQuestionPage.qsbknewAnswerPage.qsbkAnswer.answers");
for(var i=0;i<txtareas.length;i++){
if(txtareas[i].value==""||txtareas[i].value==null){
removeTableRow(txtareas[i].parentNode.parentNode);
}
}
}