动态创建表格，更新、提交、循环获取表格中各种元素的数据并转换为JSON，数组的数据格式。

最新推荐文章于 2018-11-08 10:10:08 发布

MuGuiLin

最新推荐文章于 2018-11-08 10:10:08 发布

阅读量1.1k

点赞数 1

分类专栏： ES6-10 / TS 文章标签：动态创建表格更新提交循环获取表格中各种元素的数据并数组的数据格式 JSON数组

本文链接：https://blog.csdn.net/muguli2008/article/details/51498782

版权

ES6-10 / TS 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>js表格操作</title>
</head>

<body>
    <h1>JS操作表格</h1>
    <hr />
    <div id="Box">
        <div id="Btn">
            <input type="button" value="新增 / 插入" onclick="InsertRow()"> 
            <input type="button" value="全选 / 返选" onclick="SelectAll()"> 
            <input type="button" value="删除 / 选择" onclick="DeleteAll()"> 
        </div>

        <table id="Table" border="1" cellpadding="0" cellspacing="0"> 
            <thead>
                <tr>
                    <th>操作选择</th>
                    <th>商品编号</th>
                    <th>宝贝图片</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>文件上传</th>
                    <th>宝贝详情</th>
                    <th>操作选项</th>
                </tr>
            </thead>

            <tbody id="tbody"></tbody>

            <tfoot>
                <tr>
                    <td colspan="6"></td>
                    <td colspan="2">
                        <input style="width: 160px; height: 40px;" type="button" value="编辑 / 更新" onclick="UpData()"> 
                    </td>
                </tr>
            </tfoot>
        </table>
    </div> 
</body>

</html>

CSS代码：

html,body{ font-family: "微软雅黑";}
h1{ text-align: center;}
#Box{ width: 1024px; margin: auto;}
#Btn input{ width: 100px; height: 40px; margin: 20px;}
table{ width: 100%;border-collapse: collapse;}
table tr{ height: 40px; text-align: center;}
table tr .text1{ width: 99%; height: 38px; border: none;} 
table tr .text2{ width: 60px; height: 30px; border: none;} 
table td , th{border: 1px solid grey; height: 50px; text-align: center;}

JS代码：

window.JSONARR = [];
    var i = 0, x = 2;

    function SelectAll() {
        var Checkbox = document.getElementsByClassName('checkbox');
        for (var i = 0; i < Checkbox.length; i++) {
            if (Checkbox[i].checked == true) {
                Checkbox[i].checked = false;
            }
            else {
                Checkbox[i].checked = true;
            }
        }
    }


    function DeleteAll() {
        var Del = document.getElementsByName('del');

        if (confirm("您确定要删除选中项吗？")) {
            for (var i = 0; i < Del.length; i++) {
                if (Del[i].checked == true) {
                    document.getElementById('Table').deleteRow(i + 1);
                    i = i - 1;
                }
            }
        }
        else {
            return false;
        }
    }


    function InsertRow() {
        i++; x++;
        var Row = document.getElementById('tbody').insertRow();

        Row.insertCell().innerHTML = "<input type='checkbox' data-mupiao='123456' data-admin='AAAAAAA' data-names='" + x + "' name='del' class='checkbox' value='" + x + "' />";


        Row.insertCell().innerHTML = "NO_" + i;

        Row.insertCell().innerHTML = "<img src='img/img.png' />";

        Row.insertCell().innerHTML = "<input type='text' class='text1' placeholder='宝贝名称'/>";

        Row.insertCell().innerHTML = "&yen;<input type='text' class='text2' placeholder='0.00'/>元";

        Row.insertCell().innerHTML = "<input type='file'/>";

        Row.insertCell().innerHTML = "宝贝详情!"

        Row.insertCell().innerHTML = "<input type='button' style='width: 60px; height: 30px;' value='删 除' onclick='DeleteRow(this)'/>";
    }


    function UpData() {
        window.JSONARR = [];
        getValue();

        function getValue() {

            var tbody = document.getElementById('tbody');
            var tr = tbody.getElementsByTagName('tr');
            alert("表格总行数：" + tr.length + "行");
            for (var i = 0; i < tr.length; i++) {
                window.JSONARR.push({
                    "Checkbox": tr[i].cells[0].getElementsByTagName("INPUT")[0].value,
                    "goods_mupiao": tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-mupiao'),
                    "goods_names": tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-names'),
                    "goods_admin": tr[i].cells[0].getElementsByTagName("INPUT")[0].getAttribute('data-admin'),
                    "goods_id": tr[i].cells[1].innerText,
                    "img_src": tr[i].cells[2].getElementsByTagName("img")[0].src,
                    "goods_name": tr[i].cells[3].getElementsByTagName("INPUT")[0].value,
                    "goods_rmb": tr[i].cells[4].getElementsByTagName("INPUT")[0].value,
                    "goods_info": tr[i].cells[6].innerText,
                })

            }
        }
        alert(JSON.stringify(window.JSONARR));
    }


    function DeleteRow(obj) {
        if (confirm("您确定要删除吗？")) {
            var Row = document.getElementById('tbody');
            Row.deleteRow(obj.parentElement.parentElement.rowIndex - 1);
            alert('商品删除成功！');
        }
        else {
            return false;
        }
    }