js添加删除行操作
今天在动态的实现一个试题修改工能时，学习到了一些动态处理页面元素的技能，在这里记录总结。
效果如图：
本页面，答案项部分代码如下：
<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="";
TD2.innerHTML="'button' onchange='common.checkTextarea(this,2000,false);' onkeyUp='common.checkTextarea(this,2000,false);' class='button19' value='-' onclick='javascript:removeTableRow(this.parentNode.parentNode)'/>";
}
是不是很简单，这就是简单的操作元素，那么当删除行的时候呢？
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() 方法可以更安全改变文档的结构及节点**
有兴趣可以执行一下这段代码体会一下：
<html>
<body>
<ul><li>Coffeeli><li>Teali>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 itbutton>
<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;iif(txtareas[i].value==""||txtareas[i].value==null){
removeTableRow(txtareas[i].parentNode.parentNode);
}
}
}