zoukankan      html  css  js  c++  java
  • 删除行js动态表格之一实现部分(2)

    最近使用开发的过程中出现了一个小问题,顺便记录一下原因和方法--删除行

        每日一道理
    书籍好比一架梯子,它能引领人们登上文化的殿堂;书籍如同一把钥匙,它将帮助我们开启心灵的智慧之窗;书籍犹如一条小船,它会载着我们驶向知识的海洋。
    <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" onclick="AddRow()" value="增长一行" />
            <input type="button" onclick="DelRow()" value="删除" />
            <input type="button" onclick="Save()" value="保存" />
        </li>
    </ul>
    <table cellpadding="1" cellspacing="2">
        <tr>
            <th style="60px">序号</th>
            <th style="20px"><input type="checkbox" onclick="checkAll(this)" /></th>
            <th style="120px">名称</th>
            <th style="120px">量数</th>
            <th style="120px">单价</th>
            <th style="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>

    文章结束给大家分享下程序员的一些笑话语录: 祝大家在以后的日子里. 男生象Oracle般健壮; 女生象win7般漂亮; 桃花运象IE中毒般频繁; 钱包如Gmail容量般壮大, 升职速度赶上微软打补丁 , 追女朋友像木马一样猖獗, 生活像重装电脑后一样幸福, 写程序敲代码和聊天一样有**。

  • 相关阅读:
    第一次博客作业
    第一次软工作业
    第一次博客作业
    MySQL查看当前用户
    JSP官方文档(JavaServer Pages Specification)下载
    第一次博客作业
    第一次个人编程作业
    第一次博客作业
    第一次个人编程作业
    第一次博客作业
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3057413.html
Copyright © 2011-2022 走看看