js动态表格之一实现部分（2）

最新推荐文章于 2023-09-08 13:24:07 发布

bonlog

最新推荐文章于 2023-09-08 13:24:07 发布

阅读量1.1k

点赞数 2

分类专栏： javascript+html5+前台美工

本文链接：https://blog.csdn.net/bonlog/article/details/8880462

版权

javascript+html5+前台美工专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>增加Table行</title>
    </head>
    <body>
<script type="text/javascript">
    var $ = function(id){
        return document.getElementById(id);
    }
    //全选
    function checkAll(target){
        var checkeds = document.getElementsByName("b_id");
        for (var i =0;i<checkeds.length;i++) {
            checkeds[i].checked=target.checked;
        }
    }


    //刷新行号
    function refreshRowNo(){
        var tbody = $("tbody");
        for (var i =0;i<tbody.rows.length;i++){
            tbody.rows[i].cells[0].innerHTML=i+1;
        }
    }


    //添加行
    function AddRow() {
        var tbody = $("tbody");
        var row = tbody.insertRow(tbody.rows.length);
        row.insertCell(row.cells.length);
        row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />';
        row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />';
        row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />';
        row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />';
        row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />';


        refreshRowNo();
    }


    //删除行
    function DelRow() {
        var checkeds = document.getElementsByName("b_id");
        var ischeck = false;
        for (var i = checkeds.length - 1; i >= 0; i--) {
            if (checkeds[i].checked) {
                ischeck = true;
                break;
            }
        }
        if (ischeck) {
            if (confirm("确定删除选中行?")) {
                for (var i = checkeds.length - 1; i >= 0; i--) {
                    if (checkeds[i].checked) {
                        var index = checkeds[i].parentNode.parentNode.rowIndex;
                        $("tbody").deleteRow(index - 1);
                    }
                }
                refreshRowNo();
            }
        }else{
            alert("请选中需要删除的行!");
        }
    }   


    //保存
    function Save(){
        var detail = [],
            tbody = $("tbody");
        for (var i = 0;i<tbody.rows.length;i++){
            var name = tbody.rows[i].cells[2].childNodes[0].value;
            var number = tbody.rows[i].cells[3].childNodes[0].value;
            var price = tbody.rows[i].cells[4].childNodes[0].value;
            var sum = tbody.rows[i].cells[5].childNodes[0].value;
            var item = name + "^" + number + "^" + price + "^" + sum;
            detail.push(item);
        }
        var detailstr = detail.join("|");
        $("detail").value = detailstr;
        $("myform").submit();
    }


</script>


<form id="myform" name="myform" action="" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
    <li>采购单编号：<input type="text" id="CGDBH" name="number" /></li>
    <li>
        供应商名称：<input type="text" id="GYSMC" name="supplier" />
        <input type="button" οnclick="AddRow()" value="增加一行" />
        <input type="button" οnclick="DelRow()" value="删除" />
        <input type="button" οnclick="Save()" value="保存" />
    </li>
</ul>
<table cellpadding="1" cellspacing="2">
    <tr>
        <th style="width:60px">序号</th>
        <th style="width:20px"><input type="checkbox" οnclick="checkAll(this)" /></th>
        <th style="width:120px">名称</th>
        <th style="width:120px">数量</th>
        <th style="width:120px">单价</th>
        <th style="width:120px">总金额</th>
    </tr>
    <tbody id="tbody">
        <tr>
            <td>1</td>
            <td><input type="checkbox" name="b_id" /></td>
            <td><input type="text" name="name" /></td>
            <td><input type="text" name="number" /></td>
            <td><input type="text" name="price" /></td>
            <td><input type="text" name="sum" /></td>
        </tr>
    </tbody>
</table>
</form>
<?php
    echo "<pre>";
        print_r($_POST);
    echo "</pre>";
?>
    </body>
</html>

bonlog

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js动态表格之一实现部分（2）

增加Table行 var $ = function(id){ return document.getElementById(id); } //全选 function checkAll(target){ var checkeds = document.getElementsByName("b_id");
复制链接

扫一扫