表格的JS操作以及表格中 JSON 数据的获取

最新推荐文章于 2023-03-31 17:44:15 发布
七色鸟
最新推荐文章于 2023-03-31 17:44:15 发布
阅读量1.3k
点赞数
分类专栏： JavaScript / JQuery 文章标签： json input button function html table
本文链接：https://blog.csdn.net/vincent_void/article/details/7602650
版权
JavaScript / JQuery 专栏收录该内容
18 篇文章 0 订阅
订阅专栏
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Table.aspx.cs" Inherits="Table" %>  
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title></title>  
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
        <script src="Scripts/jquery.json.js" type="text/javascript"></script>  
        <style type="text/css">  
            table tr td  
            {  
                text-align: center;  
            }  
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div>  
            <input type="button" value="JSadd" οnclick="creRow();" />  
            <input type="button" value="JQAdd" οnclick="JQcreRow();" />  
            
            <input type="button" value="data" οnclick="GetData() " />  
            <input type="button" value="remove all" οnclick="removeAll() " />  
            <input type="hidden" id="hdnIndex" name="hdnIndex" value="0" />  
            <table id="tbl" border="1" width="100%">  
                <tr>  
                    <td>  
                        序号  
                    </td>  
                    <td>  
                        名称  
                    </td>  
                    <td>  
                        型号  
                    </td>  
                    <td>  
                        操作  
                    </td>  
                </tr>  
                <tbody id="tblist">  
                </tbody>  
            </table>  
            <div id="divResult">  
            </div>  
        </div>  
        </form>  
        <script type="text/javascript">
            var tblist = document.getElementById("tblist");
            function creRow() {
                var objrow = document.createElement("tr");
                var hdnIndex = document.getElementById("hdnIndex"); // 序号  
                var index = hdnIndex.value;
                objrow.id = ++index;             //计算行号  
                hdnIndex.value = objrow.id;

                tblist.appendChild(objrow);

                var objcell = document.createElement("td"); //序号  
                objcell.align = "center";
                objcell.innerHTML = objrow.id;
                objrow.appendChild(objcell);

                var objcell = document.createElement("td"); //名称  
                objcell.align = "center";
                objcell.innerHTML = '<INPUT type="text" id="txtName' + objrow.id + '" name="txtName' + objrow.id + '"  value="ThinkPkd ' + objrow.id + '">';
                objrow.appendChild(objcell);

                var objcell = document.createElement("td"); //型号  
                objcell.align = "center";
                objcell.innerHTML = '<INPUT type="text" id="txtVersion' + objrow.id + '" name="txtVersion' + objrow.id + '"  value="A 300 ' + objrow.id + '">';
                objrow.appendChild(objcell);

                var objcell = document.createElement("td"); //操作  
                objcell.align = "center";
                objcell.innerHTML = '<INPUT type="button" value="删除1" οnclick="delRow1(this);" />';
                objcell.innerHTML += '<INPUT type="button" value="删除2" οnclick="delRow2();" />';
                objcell.innerHTML += '<INPUT type="button" value="删除3" οnclick="delRow3();" />';
                objrow.appendChild(objcell);

            }
            function JQcreRow() {

                var hdnIndex = $("#hdnIndex").val(); //序号  
                var index = ++hdnIndex;              //计算行号
                $("#hdnIndex").val(index);
                var $tr = $('<tr></tr>');
                $tr.attr('id', index);
                var operate='<INPUT type="button" value="删除1" οnclick="delRow1(this);" />';
                operate+='<INPUT type="button" value="删除2" οnclick="delRow2();" />';
                operate+='<INPUT type="button" value="删除3" οnclick="delRow3();" />';
                var $td = $('<td align="center"></td>').html(index).appendTo($tr);     //ID号 
                $td = $('<td align="center"></td>').html('<INPUT type="text" id="txtName' + index + '" name="txtName' + index + '"  value="ThinkPkd ' + index + '">').appendTo($tr);     //供电所  
                $td = $('<td align="center"></td>').html('<INPUT type="text" id="txtVersion' + index + '" name="txtVersion' + index + '"  value="A 300 ' + index + '">').appendTo($tr); //变电所
                $td = $('<td align="center"></td>').html(operate).appendTo($tr);     //线路
                 
                $("#tblist").append($tr);

            }  
            //删除1  
            function delRow1(btndel) {
                tblist.removeChild(btndel.parentElement.parentElement);
            }

            function delRow2() {
                var oElement = event.srcElement;
                while (oElement.tagName != "TR") {
                    oElement = oElement.parentElement;
                }
                tblist.removeChild(oElement);
            }

            function delRow3()//刪除当前行  
            {
                var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
                document.getElementById("tbl").deleteRow(currRowIndex); //tbl--表格id  
            }

            function removeAll(){
                $("#hdnIndex").val(0);
                $('#tblist').find('tr').remove();
            }
            function GetData() {
                var data = [];
                $('#tblist').find('tr').each(function (i) {
                    var id = $(this).attr('id');
                    txtName = $('#txtName' + id).val();
                    txtVersion = $('#txtVersion' + id).val();
                    data.push({ id: id, txtName: txtName, txtVersion: txtVersion });
                });

                var html = "";
                html += "data.push():<br/>";
                data.push({ time: '2012-05-27' });     //push  方法使用  

                $.each(data, function (i, v) {
                    html += v.txtName + "---- " + v.time + "<br/>";
                });

                html += "<br/>$.toJSON():<br/>";
                html += $.toJSON(data);   //将Json数据转化为字符串  


                html += "<br/><br/> 将字符串转换为Json数据 eval('(' + str + ')');:<br/>";
                var str = $.toJSON(data);
                //将字符串转换为Json数据  
                var d = eval("(" + str + ")");
                $.each(d, function (i, v) {
                    html += v.txtName + "---- " + v.time + "<br/>";
                });

                $("#divResult").html(html);
            }  
        </script>  
    </body>  
    </html>