js操作 新增刪除table行,並進行重新整理

SieSteven發表於2015-01-22



新增行的js如下  table 的id為myTable

新增table的一行內容

 function insertRow() {
            var rowValue = document.getElementById("zdhRowCount").value;
            //            alert(rowValue);
            if (rowValue == "")
                rowValue = "0";
            var rowCount = parseInt(rowValue) + 1;
            var c0 = "<tr><td><input type=\"checkbox\" /></td>";
            var c1 = "<td class=\"bg02\" >  <select  id=\"Txt_ND" + rowCount + "\"> " + optionYear + " </select></td>";
            var c2 = "<td>  <input type=\"text\" id=\"Txt_FWXMMC" + rowCount + "\" name=\"1\"  style=\"width:100px;\" />  </td>";
            var c3 = "<td>  <input type=\"text\" id=\"Txt_FWDD" + rowCount + "\" name=\"1\"  style=\"width:100px;\" /></td>";
            var c4 = "  <td><input type=\"text\" id=\"Txt_FWNR" + rowCount + "\" name=\"1\" style=\"width:100px;\" /> </td>";
            var c5 = "<td>  <a id=\"0\" href=\"javascript:void(0);\" onclick=\"DeleteSingle(this)\"><span>  刪除</span></a> </td> </tr>";
            var row = c0 + c1 + c2 + c3 + c4 + c5;
            $("#myTable").append(row);
            document.getElementById("zdhRowCount").value = rowCount;
         
        }


遍歷表,獲取表的資訊

涉及到讀取行,獲取下拉選單,輸入框的值

 function AddServiceHistory() {
            var table = document.getElementById("myTable");
            var content = "";
            var hyid = document.getElementById("hdfd_yhid").value;
            for (var i = 1; i < table.rows.length; i++) {
                var row;
                var rtl = table.rows[i].cells[1].getElementsByTagName("select")[0];
                // alert(rtl.options.(rtl.selectedIndex).value);
                content += hyid + "$";
                content += rtl.options[rtl.selectedIndex].value + "$";
                //content += table.rows[i].cells[1].getElementsByTagName("select")[0].value+"$";
                content += table.rows[i].cells[2].getElementsByTagName("input")[0].value + "$";
                content += table.rows[i].cells[3].getElementsByTagName("input")[0].value + "$";
                content += table.rows[i].cells[4].getElementsByTagName("input")[0].value + "$";
                // content += table.rows[i].cells[2].getElementsByTagName("input")[0].value + "$";
                content += "^";
            }
            content = escape(content);
            AddServiceHistorys(content);
        }


這是傳遞引數到指定頁面,取值後直接進行結果的顯示

 function AddServiceHistorys(obj) {
            // 構建表格建立以往服務時間
            // ajax獲取table
            alert(obj);
            $.get("/XZYZY/ZYZ/GetServiceHistory.aspx", { pval: obj, TextType: "add" }, function (data) {
                // alert(data);
                if (data != null) {
                    if (data == "false") {
                        // document.getElementById("div_history").style = "none";
                        if (null != document.getElementById("div_history")) {
                            alert("操作失敗!");
                            document.getElementById("div_history").style.display = "block";
                            document.getElementById("services").innerHTML = data.split("false")[1];
                        }
                    } else {
                        // alert(data);
                        if (null != document.getElementById("div_history")) {
                            //alert("操作成功");
                            document.getElementById("div_history").style.display = "block";
                            document.getElementById("services").innerHTML = data.split("true")[1];
                        }


                    }


                }
            });
        }


此方法為刪除選中行

// 刪除行
        function DeleteRow() {
            var table = document.getElementById("myTable");
            if (table.rows.length < 2) {
                return;
            }
            var rows;
            var cells;
            var checkeds;
            var dd = table.rows.length - 1;
            for (var i = dd; i > 1; i--) {
                rows = table.rows[i];
                cells = rows.cells[0];
                checkeds = cells.getElementsByTagName("input")[0];
                if (checkeds.checked == true) {
                    table.deleteRow(rows.rowIndex);
                }
            }
        }



相關文章