js動態表格之一實現部分（2）

print?<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="width:60px">序號</th> 
        <th style="width:20px"><input type="checkbox" onclick="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> 

<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="width:60px">序號</th>
        <th style="width:20px"><input type="checkbox" onclick="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>

 

Related posts:

  1. js的表格操作的例子
  2. ExtJs 表格的實現
  3. jquery表格排序插件
  4. 使用Ext.grid.Panel生成表格
  5. jquery表格可編輯修改表格裡面的值,點擊td變input無刷新更新表格
  6. js綜合應用簡單的表格統計
  7. ExtJs 設置GridPanel表格文本垂直居中
  8. ExtJs4 表格輸入時的有效性驗證

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *