Question

我需要帮助。我希望附加一个与现有表相同的表条件示例我在na旁边的第一行上单击na +按钮时我有2行，新附加表应出现在两者之间第1排和第3排。请帮忙

<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>

Answer 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。

附加html表

1 个答案: