附加html表[关闭]答案

【问题标题】：Append html table [closed]附加html表[关闭]
【发布时间】：2013-07-20 17:21:54
【问题描述】：

我需要帮助。我想附加一个与现有表相同的表条件是示例我有 2 行当我单击 na 旁边第一行上的 na + 按钮时，新的附加表应该出现在第一行和第三行之间. 请帮忙

<script src="jquery-1.7.1.js"></script>

<script language="javascript">
    function clearNode(node){
        var child = node.childNodes[0];
        while(child != null)
        {
            node.removeChild(child);
            child = node.childNodes[0];
        }   
    }
    function addRow(table){
        var targetView = table;
        // CREATE ELEMENT   
        var newtr = document.createElement("tr");

        var newtd_c1 = document.createElement("td");
            newtd_c1.setAttribute("width","147");
            newtd_c1.setAttribute("align","center");
            newtd_c1.appendChild(
                input_data = document.createElement("input"),
                input_data.setAttribute("type","time"),
                input_data.setAttribute("size","10"),
                input_data.setAttribute("autofocus","true")
            );
        var newtd_c2 = document.createElement("td");
            newtd_c2.setAttribute("width","138");
            newtd_c2.setAttribute("align","center");
            newtd_c2.appendChild(
                selection = document.createElement("select"),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 1"),option.appendChild(document.createTextNode("Select 1"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 2"),option.appendChild(document.createTextNode("Select 2"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 3"),option.appendChild(document.createTextNode("Select 3"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 4"),option.appendChild(document.createTextNode("Select 4"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 5"),option.appendChild(document.createTextNode("Select 5"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 6"),option.appendChild(document.createTextNode("Select 6"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 7"),option.appendChild(document.createTextNode("Select 7"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 8"),option.appendChild(document.createTextNode("Select 8"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 9"),option.appendChild(document.createTextNode("Select 9")))
            );
        var newtd_c3 = document.createElement("td");
            newtd_c3.setAttribute("width","98");
            newtd_c3.setAttribute("align","center");
            newtd_c3.appendChild(
                selection = document.createElement("select"),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 1"),option.appendChild(document.createTextNode("Source 1"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 2"),option.appendChild(document.createTextNode("Source 2"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 3"),option.appendChild(document.createTextNode("Source 3"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 4"),option.appendChild(document.createTextNode("Source 4"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 5"),option.appendChild(document.createTextNode("Source 5"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 6"),option.appendChild(document.createTextNode("Source 6"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 7"),option.appendChild(document.createTextNode("Source 7"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 8"),option.appendChild(document.createTextNode("Source 8"))),
                selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 9"),option.appendChild(document.createTextNode("Source 9")))
            );
        var newtd_c4 = document.createElement("td");
            newtd_c4.setAttribute("width","119");
            newtd_c4.setAttribute("align","center");
            newtd_c4.appendChild(
                input_data = document.createElement("input"),
                input_data.setAttribute("type","text"),
                input_data.setAttribute("size","12"),
                input_data.setAttribute("placeholder","Value")
            );
        var newtd_c5 = document.createElement("td");
            newtd_c5.setAttribute("width","115");
            newtd_c5.setAttribute("align","center");
            newtd_c5.appendChild(
                input_data = document.createElement("input"),
                input_data.setAttribute("type","button"),
                input_data.setAttribute("value","Delete"),
                input_data.onclick = function(){ return clearNode(newtr); }
            );
        var newtd_c6 = document.createElement("td");
            newtd_c6.setAttribute("width","115");
            newtd_c6.setAttribute("align","center");
            newtd_c6.appendChild(
                input_data = document.createElement("input"),
                input_data.setAttribute("type","button"),
                input_data.setAttribute("value","+"),
                input_data.onclick = function(){ return addRow(table); }
            );

        newtr.appendChild(newtd_c1);
        newtr.appendChild(newtd_c2);
        newtr.appendChild(newtd_c3);
        newtr.appendChild(newtd_c4);
        newtr.appendChild(newtd_c5);
        newtr.appendChild(newtd_c6);

        targetView.appendChild(newtr);
    }
    function deleteRow(tableID){
        try{
            var table=document.getElementById(tableID);
            var rowCount=table.rows.length;

            for(var i=0;i<rowCount;i++){
                var row=table.rows[i];
                var chkbox=row.cells[0].childNodes[0];
                if(null!=chkbox&&true==chkbox.checked){
                    if(rowCount<=1){
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;i--;
                }
            }
        }catch(e){
            alert(e);
        }
    }


function addRowClone(nextrow){
    var targetView = document.getElementById("Data");
    // CREATE ELEMENT
    // COUNT LIST
    var list     = $(".datalisting").length;

    var newlist = list+1;
    alert(newlist);
    var newdiv   = document.createElement("div");
        newdiv.setAttribute("id","list_"+newlist);
        newdiv.setAttribute("class","datalisting");
        newdiv.setAttribute("style","margin:30px 0;");
    var newtable = document.createElement("table");
        newtable.setAttribute("class","dataTable");
        newtable.setAttribute("width","689");
        newtable.setAttribute("border","1");
        newtable.setAttribute("cellspacing","0");
        newtable.setAttribute("cellpadding","0");

    var newtr = document.createElement("tr");

    var newtd_c1 = document.createElement("td");
        newtd_c1.setAttribute("width","147");
        newtd_c1.setAttribute("align","center");
        newtd_c1.appendChild(
            input_data = document.createElement("input"),
            input_data.setAttribute("type","time"),
            input_data.setAttribute("size","10"),
            input_data.setAttribute("autofocus","true")
        );
        newtd_c1.appendChild(
            input_data = document.createElement("input"),
            input_data.setAttribute("type","button"),
            input_data.setAttribute("value","+"),
            input_data.onclick = function(){
                addRowClone("list_"+newlist);
            }
        );
    var newtd_c2 = document.createElement("td");
        newtd_c2.setAttribute("width","138");
        newtd_c2.setAttribute("align","center");
        newtd_c2.appendChild(
            selection = document.createElement("select"),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 1"),option.appendChild(document.createTextNode("Select 1"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 2"),option.appendChild(document.createTextNode("Select 2"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 3"),option.appendChild(document.createTextNode("Select 3"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 4"),option.appendChild(document.createTextNode("Select 4"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 5"),option.appendChild(document.createTextNode("Select 5"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 6"),option.appendChild(document.createTextNode("Select 6"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 7"),option.appendChild(document.createTextNode("Select 7"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 8"),option.appendChild(document.createTextNode("Select 8"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Value 9"),option.appendChild(document.createTextNode("Select 9")))
        );
    var newtd_c3 = document.createElement("td");
        newtd_c3.setAttribute("width","98");
        newtd_c3.setAttribute("align","center");
        newtd_c3.appendChild(
            selection = document.createElement("select"),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 1"),option.appendChild(document.createTextNode("Source 1"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 2"),option.appendChild(document.createTextNode("Source 2"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 3"),option.appendChild(document.createTextNode("Source 3"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 4"),option.appendChild(document.createTextNode("Source 4"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 5"),option.appendChild(document.createTextNode("Source 5"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 6"),option.appendChild(document.createTextNode("Source 6"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 7"),option.appendChild(document.createTextNode("Source 7"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 8"),option.appendChild(document.createTextNode("Source 8"))),
            selection.appendChild(option = document.createElement("option"),option.setAttribute("select","Source 9"),option.appendChild(document.createTextNode("Source 9")))
        );
    var newtd_c4 = document.createElement("td");
        newtd_c4.setAttribute("width","119");
        newtd_c4.setAttribute("align","center");
        newtd_c4.appendChild(
            input_data = document.createElement("input"),
            input_data.setAttribute("type","text"),
            input_data.setAttribute("size","12"),
            input_data.setAttribute("placeholder","Value")
        );
    var newtd_c5 = document.createElement("td");
        newtd_c5.setAttribute("width","115");
        newtd_c5.setAttribute("align","center");
        newtd_c5.appendChild(
            input_data = document.createElement("input"),
            input_data.setAttribute("type","button"),
            input_data.setAttribute("value","Delete Main"),
            input_data.onclick = function(){ return clearNode(newdiv); }
        );
    var newtd_c6 = document.createElement("td");
        newtd_c6.setAttribute("width","115");
        newtd_c6.setAttribute("align","center");
        newtd_c6.appendChild(
            input_data = document.createElement("input"),
            input_data.setAttribute("type","button"),
            input_data.setAttribute("value","+"),
            input_data.onclick = function(){ return addRow(newtable); }
        );

    newtr.appendChild(newtd_c1);
    newtr.appendChild(newtd_c2);
    newtr.appendChild(newtd_c3);
    newtr.appendChild(newtd_c4);
    newtr.appendChild(newtd_c5);
    newtr.appendChild(newtd_c6);

    newtable.appendChild(newtr);
    newdiv.appendChild(newtable);

    if(nextrow != null){
        var prevlist = newlist-1;
        $(targetView).append($(newdiv)).insertAfter($(nextrow));
    }else{
        targetView.appendChild(newdiv);
    }
}
window.onload = function(){
    addRowClone();
}

</script>


</head>
<body>

    <div style="margin:10px 0;border:1px solid #000;width:629px;text-align:right;">
        <div style="padding-right:15px;">
            <input type="button" value="Add Observation" onClick="addRowClone();"/>
        </div>
    </div><div id="Data">
    </div>
</body>
</html>

【问题讨论】：

请把你的代码压缩成一个说明性的最小例子（并使用 for 循环。如果你做同样的事情十次，只改变一个数字，那就是一个 for 循环）。另外，请更详细地描述您实际需要帮助的内容；只需写完整的句子，以便每个人都能理解您的要求，理想情况下，使用 jsfiddle.net 示例显示您到目前为止的位置（再次，简化示例，而不是一百万表行），以便我们可以修改它以显示你如何得到你想要的，完成。
也许看看 jQuery，它会减轻你的 javascript 负担

标签： javascript dom button append html-table

【解决方案1】：

我想你不会像this那样想。
HTML：

<table>
<tbody>
    <tr>
        <td>First row</td>
        <!-- 'this' sends as argument to the addRow function - it's a button on which you click -->
        <td><button onclick="addRow(this);">Add row</button></td>
    </tr>
    <tr>
        <td>Second row</td>
        <td><button onclick="addRow(this);">Add row</button></td>
    </tr>
</tbody>
</table>

还有 javascript：

function addRow(button) {
// get a table cell in which clicked button lies
var buttonTd = button.parentNode;
// get a table row in which clicked button lies 
var rowTr = buttonTd.parentNode;
// get a table tbody
var tableTbody = rowTr.parentNode;
// get a table
var tableTable = tableTbody.parentNode;

// clone table row in which clicked button lies
var newTr = rowTr.cloneNode(true);
// get a cell which holds name
var newTrNameTd = newTr.children[0];
// get a name, for first time it's 'First row' or 'Second row'
var oldName = newTrNameTd.innerHTML;
// adding to name ' new'
var newName = oldName + ' new';
// append name to the name's cell in cloned row
newTrNameTd.innerHTML = newName;

// try to get next row after that in which clicked button is lies 
var nextRow = rowTr.nextSibling;
// if we get this row
if (nextRow) {
    // append cloned row before it
    tableTbody.insertBefore(newTr, nextRow);
// if there was a last row
} else {
    // append cloned row in the end of the table
    tableTbody.appendChild(newTr);
}
}

Javascript 有一个函数cloneNode(true)，它可以克隆您选择的节点。
if 代码中的语句在nextRow 之后插入节点。
附言如果您使用 jQuery 在所有代码中使用它，或者使用简单的 javascript。

【讨论】：

是的，就是这样...非常感谢... :)
@user2605454，没问题。如果我回答了您的问题，只需将答案标记为已批准。
先生您在吗？那里的函数 addRow 我不知道该怎么做，以便它将附加在下一行而不是最后一行....谢谢
@user2605454 我对代码进行了评论。如果您仍然无法理解它是如何工作的，请告诉我
先生...嗯，我在 addRow 函数上有问题...如果我要单击最后的 na + 按钮，我将如何将它附加到行旁边..coz 对现在它将始终附加在最后一行.. 如果它有 3 行，它会在第 4 行附加需要帮助才能将其附加到正确的行