怎样用js 实现点击添加按钮input里的值生成一个，表格可以删除修改参数。求实例！！！

就这种这个不兼容火狐并且可以提交是form吗... 就这种这个不兼容火狐
并且可以提交是form吗展开

 我来答

2个回答

#热议# 为什么说不要把裤子提到肚脐眼？

yugi111
推荐于2017-09-07 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

废话不多说，直接上代码，采纳即可

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS 演示代码</title>
    <style>
.* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: red;
}

div.wrap {
    width: 800px;
    margin: auto;
}

table {
    width: 700px;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    background-color: orange;
}

td,th {
    border: 1px solid black;
    text-align: center;
}

table input[type=text] {
    width: 100px;
}
    </style>
    <script>
        var yugi = {
            col: 5,
            addRow: function(table) {
                var vals = [a.value, b.value, c.value, d.value, "<a href='###' onclick='yugi.modify(table,this)'>修改</a>&nbsp;<a href='###' onclick='yugi.del(table,this)'>删除</a>"];
                var tr = table.insertRow(table.tBodies[0].rows.length);
                for (var i = 0; i < yugi.col; i++) {
                    var td = tr.insertCell(tr.cells.length);
                    td.innerHTML = vals[i];
                }
            },
            modify: function(table, row) {
                var r = row.parentElement.parentElement,
                    c = r.cells;
                if (/.*修改.*/g.test(row.innerHTML)) {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        var txt = document.createElement("input");
                        txt.type = "text";
                        txt.value = ci.innerHTML;
                        ci.innerHTML = "";
                        ci.appendChild(txt);
                    }
                    row.innerHTML = "保存";
                } else {
                    for (var i = 0; i < c.length - 1; i++) {
                        var ci = c[i];
                        ci.innerHTML = ci.children[0].value;
                    }
                    row.innerHTML = "修改";
                }
            },
            del: function(table, row) {
                var ind = row.parentElement.parentElement.rowIndex;
                table.tBodies[0].deleteRow(ind);
            }
        }
    </script>
</head>
<body>
    <div class="wrap">
        <div>
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="button" value="添加" onclick="yugi.addRow(table)" />
        </div>
        <table id="table">
            <tr>
                <th>店面地区</th>
                <th>申请人</th>
                <th>型号</th>
                <th>数量</th>
                <th>管理</th>
            </tr>
        </table>
    </div>
</body>
</html>

追问

请问怎样把这个表格里的数据提交？？？form？？？

追答

.wrap {
    width: 800px;
    margin: auto;
}
----------------------

<body>
    <form class="wrap" action="">
        <div>
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="button" value="添加" onclick="yugi.addRow(table)" />
            <input type="submit" value="提交" onsubmit="" />
        </div>
        <table id="table">
            <tr>
                <th>店面地区</th>
                <th>申请人</th>
                <th>型号</th>
                <th>数量</th>
                <th>管理</th>
            </tr>
        </table>
    </form>
</body>

-----
切勿再产生新问题，采纳即可