search

Home >Web Front-end >JS Tutorial >JQuery method example for operating tr and td content_jquery

JQuery method example for operating tr and td content_jquery

WBOY
WBOYOriginal
2016-05-16 17:40:581155browse
Copy code The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml"><br><head id="Head1" runat="server"><br>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br>    <link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" /><br>    <link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" /><br>    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script><br>    <link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" /><br>    <link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" /><br>    <script type="text/javascript"><br>        $(document).ready(function () {<br>            $("#selEmployee").click(function () {<br>                var $table = $("#tbProEmployee tr");<br>                var len = $table.length;<br>                var trid = "tbProEmployee"   len;<br>                var strDeviceTr = "<tr id="   trid   ">";<br>                strDeviceTr  = "<td ><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value=""   "123"   "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";<br>                strDeviceTr  = "<label id="txtEmployeeName">"   "姓名"   "</label></td>";<br>                strDeviceTr  = "<td><input id="txtRemark" type="text" name="ProjectEmployee" /></td>";<br>                strDeviceTr  = "<td ><a href="javascript:;SaveProEmployee('"   trid   "')">保存</a> | <a href="javascript:;DelProEmployee('"   trid   "')">删除</a></td>";<br>                strDeviceTr  = " </tr>";<br>                $("#tbProEmployee").append(strDeviceTr);<br>            });<br>        });<br>        function SaveProEmployee(index) {<br>            //ajax保存<br>            var tr = $("tr[id="   index   "]");<br>            var employee = tr.find("#txtEmployeeName").text();<br>            var remark = tr.find("#txtRemark").val();<br>            var strtd = "<td><input id="txtEmployeeInnerID" type="hidden" name="ProjectEmployee" value=""   "123"   "" /><input id="txtInnerID" type="hidden" name="ProjectEmployee" value="" />";<br>            strtd  = "<label id="txtEmployeeName">"   employee   "</label></td>";<br>            strtd  = "<td ><label id="txtRemark">"   remark   "</label></td>";<br>            strtd  = "<td ><a href="javascript:;UpdateProEmployee('"   index   "')">修改</a> | <a href="javascript:;DelProEmployee('"   index   "')">删除</a></td>";<br>            tr.html(strtd);<br>        }<br>        function UpdateProEmployee(index) {<br>            //ajax保存<br>            var tr = $("tr[id=" + index + "]");<br>            var employee = tr.find("#txtEmployeeName").text();<br>            var remark = tr.find("#txtRemark").text();<br>            var strtd = "<td><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />";<br>            strtd += "<label id=\"txtEmployeeName\">" + employee + "</label></td>";<br>            strtd += "<td><input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" value=\"" + remark + "\" /></td>";<br>            strtd += "<td ><a href=\"javascript:;SaveProEmployee('" + index + "')\">保存</a> | <a href=\"javascript:;DelProEmployee('" + index + "')\">删除</a></td>";<br>            tr.html(strtd);<br>        }<br>        function DelProEmployee(index) {<br>            if (confirm("Are you sure？")) {<br>                $("tr[id=" + index + "]").remove();<br>            }<br>        }<br>    </script><br></head><br><body><br>    <form id="form1" runat="server"><br>    <div class="snippet download-list"><br>        <table class="telerik-reTable-2" id="tbProEmployee"><br>            <tbody><br>                <tr><br>                    <th colspan="3"><br>                        [<a id="selEmployee" href="javascript:void(0)">执行人员</a>]<br>                    </th><br>                </tr><br>                <tr><br>                    <th><br>                        姓名<br>                    </th><br>                    <th><br>                        备注<br>                    </th><br>                    <th><br>                        操作<br>                    </th><br>                </tr><br>            </tbody><br>        </table><br>    </div><br>    </form><br></body><br></html>








Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：6 novel jQuery and CSS3 progress bar plug-ins recommended_jqueryNext article：6 novel jQuery and CSS3 progress bar plug-ins recommended_jquery
Related articles
See more