JQuery操作tr和td内容的方法实例

2019-09-05 11:28栏目:Web前端

复制代码 代码如下:

[javascript]  

<PRE class=html name="code"><html xmlns=";
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" />
    <link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" />
    <link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selEmployee").click(function () {
                var $table = $("#tbProEmployee tr");
                var len = $table.length;
                var trid = "tbProEmployee" len;
                var strDeviceTr = "<tr id=" trid ">";
                strDeviceTr = "<td ><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";
                strDeviceTr = "<label id="txtEmployeeName">"

<pre name="code" class="html"><html xmlns=";  

  • "姓名" "</label></td>";
                    strDeviceTr = "<td><input id="txtRemark" type="text" name="ProjectEmployee" /></td>";
                    strDeviceTr = "<td ><a href="javascript:;SaveProEmployee('" trid "')">保存</a> | <a href="javascript:;DelProEmployee('" trid "')">删除</a></td>";
                    strDeviceTr = " </tr>";
                    $("#tbProEmployee").append(strDeviceTr);
                });
            });
            function SaveProEmployee(index) {
                //ajax保存
                var tr = $("tr[id=" index "]");
                var employee = tr.find("#txtEmployeeName").text();
                var remark = tr.find("#txtRemark").val();
                var strtd = "<td><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";
                strtd = "<label id="txtEmployeeName">" employee
  • "</label></td>";
                strtd = "<td ><label id="txtRemark">" remark "</label></td>";
                strtd = "<td ><a href="javascript:;UpdateProEmployee('" index "')">修改</a> | <a href="javascript:;DelProEmployee('" index "')">删除</a></td>";
                tr.html(strtd);
            }
            function UpdateProEmployee(index) {
                //ajax保存
                var tr = $("tr[id=" index "]");
                var employee = tr.find("#txtEmployeeName").text();
                var remark = tr.find("#txtRemark").text();
                var strtd = "<td><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";
                strtd = "<label id="txtEmployeeName">" employee
  • "</label></td>";
                strtd = "<td><input id="txtRemark" type="text" name="ProjectEmployee" value="" remark "" /></td>";
                strtd = "<td ><a href="javascript:;SaveProEmployee('" index "')">保存</a> | <a href="javascript:;DelProEmployee('" index "')">删除</a></td>";
                tr.html(strtd);
            }
            function DelProEmployee(index) {
                if (confirm("Are you sure?")) {
                    $("tr[id=" index "]").remove();
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="snippet download-list">
            <table class="telerik-reTable-2" id="tbProEmployee">
                <tbody>
                    <tr>
                        <th colspan="3">
                            [<a id="selEmployee" href="javascript:void(0)">实行人士</a>]
                        </th>
                    </tr>
                    <tr>
                        <th>
                            姓名
                        </th>
                        <th>
                            备注
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
        </form>
    </body>
    </html></PRE><BR>
    <BR>
    <PRE></PRE>
    <PRE></PRE>

<head id="Head1" runat="server">  

代码如下: PRE class=html name="code"html xmlns="" head id="Head1" runat="server" meta http-equiv="Content-Type" content="text/html; cha...

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

    <link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" />  

    <link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" />  

    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>  

    <link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" />  

    <link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" />  

    <script type="text/javascript">  

        $(document).ready(function () {  

            $("#selEmployee").click(function () {  

                var $table = $("#tbProEmployee tr");  

                var len = $table.length;  

                var trid = "tbProEmployee" len;  

                var strDeviceTr = "<tr id=" trid ">";  

                strDeviceTr = "<td ><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";  

                strDeviceTr = "<label id="txtEmployeeName">"

  • "姓名" "</label></td>";  

                strDeviceTr = "<td><input id="txtRemark" type="text" name="ProjectEmployee" /></td>";  

                strDeviceTr = "<td ><a href="javascript:;SaveProEmployee('" trid "')">保存</a> | <a href="javascript:;DelProEmployee('" trid "')">删除</a></td>";  

                strDeviceTr = " </tr>";  

                $("#tbProEmployee").append(strDeviceTr);  

            });  

        });  

        function SaveProEmployee(index) {  

            //ajax保存  

            var tr = $("tr[id=" index "]");  

            var employee = tr.find("#txtEmployeeName").text();  

            var remark = tr.find("#txtRemark").val();  

            var strtd = "<td><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";  

            strtd = "<label id="txtEmployeeName">" employee

  • "</label></td>";  

            strtd = "<td ><label id="txtRemark">" remark "</label></td>";  

            strtd = "<td ><a href="javascript:;UpdateProEmployee('" index "')">修改</a> | <a href="javascript:;DelProEmployee('" index "')">删除</a></td>";  

            tr.html(strtd);  

        }  

        function UpdateProEmployee(index) {  

            //ajax保存  

            var tr = $("tr[id=" index "]");  

            var employee = tr.find("#txtEmployeeName").text();  

            var remark = tr.find("#txtRemark").text();  

            var strtd = "<td><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value="" "123" "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";  

            strtd = "<label id="txtEmployeeName">" employee

  • "</label></td>";  

            strtd = "<td><input id="txtRemark" type="text" name="ProjectEmployee" value="" remark "" /></td>";  

            strtd = "<td ><a href="javascript:;SaveProEmployee('" index "')">保存</a> | <a href="javascript:;DelProEmployee('" index "')">删除</a></td>";  

            tr.html(strtd);  

        }  

        function DelProEmployee(index) {  

            if (confirm("Are you sure?")) {  

                $("tr[id=" index "]").remove();  

            }  

        }  

    </script>  

</head>  

<body>  

    <form id="form1" runat="server">  

    <div class="snippet download-list">  

        <table class="telerik-reTable-2" id="tbProEmployee">  

            <tbody>  

                <tr>  

                    <th colspan="3">  

                        [<a id="selEmployee" href="javascript:void(0)">实施职员</a>]  

                    </th>  

                </tr>  

                <tr>  

                    <th>  

                        姓名  

                    </th>  

                    <th>  

                        备注  

                    </th>  

                    <th>  

                        操作  

                    </th>  

                </tr>  

            </tbody>  

        </table>  

    </div>  

    </form>  

</body>  

</html></pre><br>  

<br>  

<pre></pre>  

<pre></pre>  

] pre name=code class=htmlhtml xmlns= head id=Head1 runat=server meta http-equiv=Content-Type content=text/html; charset=gb2312 / link href=.....

版权声明:本文由六合联盟发布于Web前端,转载请注明出处:JQuery操作tr和td内容的方法实例