Question

在JSFiddle中，我试图使用javascript动态生成div。这些div将包含表格，其中最后两行可以使用添加按钮递增。

我已经尝试过小提琴中的代码。 ins_row（）函数用于在表中添加在div中生成的行。

addEvent（）函数用于生成div

单击“添加产品”按钮时，将生成包含一行表格的div。

单击添加按钮后，最后两行应按照点击继续添加。如果单击直接删除div的删除按钮，则应删除整个表格和div。

单击直接生成行的删除按钮时，只应该删除该行，而不是整个div。

问题

这里的问题是带有表的div已生成但我无法弄清楚如何在表中添加行。

See it in action here

预期输出

Screenshot of expected result http://img338.imageshack.us/img338/3863/samplea.png

注意：我刚将外部JS文件粘贴到上述小提琴的javascript列中，因为我没有资源链接。

当前输出

Screenshot of present result http://img824.imageshack.us/img824/8015/expresult.png

我希望我提出的问题是可以理解的，如果有什么不清楚，请告诉我

Answer 1

我相信我已正确理解您的要求试试这个小提琴http://jsfiddle.net/Kucuk/14/

它使用jquery - 它只是一个样本类型的东西，你可能可能基于你自己的代码。如果这是你喜欢的，它在普通的旧JavaScript中都可行。造型有点偏，但你可以处理我的希望。

请告诉我这是否会以某种方式帮助您。

Answer 2

通常，我使用jQuery的appendTo（）函数以及虚拟html结构。我将它存储在一个变量＆amp;通过进一步的属性操作来跟进它。

要了解我在说什么，请检查这个小提琴：http://jsfiddle.net/GGS4N/ 这是对另一个问题Smooth out this jQuery toggle animation?的回答。重点关注下列方法：

创建虚拟HTML结构（通用性质）。
在你想要的事件上，触发人口并将动态元素操纵到dom中，给他们一个标识符并操纵其他特定属性，并在小提琴中看到，甚至为他们制作动画。

如果您更喜欢原始JS，从代码中可以看出，您也可以在原始JS中实现相同的功能！：）

Answer 3

尝试this fiddle，看看它是否适合您。

在此示例中，当您单击“添加产品”时，将创建所有4个文本框，并添加更多行并删除div按钮。

单击添加行时，将使用删除行按钮创建最后两个文本框。

每当产品的行数超过1时，隐藏div div按钮，当行数为1时再次显示。

Answer 4

这更像你的预期吗？

http://jsfiddle.net/7AeDQ/81/

我通过添加样式来扩展表格和包含按钮的单元格来实现这一目标。我还将按钮更改为输入type =“button”。

~~希望这适合你。~~

修改： 我刚刚注意到我混淆了你的预期输出和当前输出。现在正在研究预期的产出。

Answer 5

另一种纯粹的js解决方案

<html>
    <body>
        <script>
            var tblCount = 0
            var tblIdStr = "productTbl";

            function removeRow(id, rowNumber) {
                var el = document.getElementById(id);
                el.deleteRow(rowNumber);
            }

            function addTable() {
                            ++tblCount;
                tblId = tblIdStr + tblCount;
                var args = "'" + tblId + "'";
                var tblHtml = '<tr><td>Product name</td><td>Price</td><td>Competitor</td><td>Price</td></tr><tr><td><input type="text"></td><td><input type="text"><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="Add" onclick="addRow(' + args + ')"></td><td></td></tr>'
                var tbl = document.createElement("table");
                tbl.setAttribute("id", tblId);
                document.getElementById("container").appendChild(tbl)
                document.getElementById(tblId).innerHTML = tblHtml;

            }

            function addRow(id) {
                var el = document.getElementById(id)
                var rowCount = el.rows.length;
                var row = el.insertRow(rowCount);
                //console.log(row)
                var args = "'" + id + "'" + "," + rowCount;
                var tblRowHtml = '<td colspan=2></td><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="remove" onclick="removeRow(' + args + ')"></td>';
                //el.rows[rowCount].setAttribute("id", rowId);
                el.rows[rowCount].innerHTML = tblRowHtml

            }
        </script>
        <input type="button" value="Add new product table" onclick="addTable()">
        <div id="container">

        </div>
    </body>
</html>

如何生成包含具有动态可添加和可移动行的表的Div？ - JSfiddle已添加

问题

预期输出

当前输出

5 个答案: