js添加删除行操作_js 添加删除行-CSDN博客

本文链接：https://blog.csdn.net/jiajane/article/details/50608682

今天在动态的实现一个试题修改工能时，学习到了一些动态处理页面元素的技能，在这里记录总结。
效果如图：
这里写图片描述
本页面，答案项部分代码如下：

<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);
            }
        }

    }