jquery 完成数据的增删改，动态操作表格数据。

来源：互联网发布：js 同意协议编辑：程序博客网时间：2024/05/19 00:12
//调用js版本
<script src="Scripts/jquery-3.2.1.min.js"></script>
//js 代码 
<script type="text/javascript">        var s_tr;        $(function () {                       //添加            $("#btnsave").click(function () {                if (s_tr == null) {                    //复制首行,得到表结构                    var tr = $("#data tr:eq(0)").clone();                    //得到列,并且加入数据                    var tds = tr.find("td");                    tds.eq(0).html("<input type='checkbox'/>")                    tds.eq(1).text($("#txtname").val().trim());                    tr.bind("click", Select);                    //把行加入表中                    $("#data").append(tr);                } else {                    alert("现在是修改状态");                }            });            //修改            $("#btnupdate").click(function () {                //判断是否选中                if (s_tr != null) {                            var tds = s_tr.find("td");                    tds.eq(1).text($("#txtname").val().trim());                    //清空文本,加到添加状态                    $("#txtname").val("");                    s_tr.css("background", "");                    s_tr = null;                } else {                    alert("请选择要修改的文本!");                }            });            //删除            $("#btndelete").click(function () {                $("#data :checked").parent().parent().remove();            });                 })        //选中        function Select() {            //把所有背景色取消,并加入新的背景色            $("#data tr").css("background", "")            $(this).css("background", "red");            s_tr = $(this);            //alert($(this).children().next().text());            //找到列,并把列的文本值赋给文本框            var tds = $(this).find("td");            $("#txtname").val(tds.eq(1).text());        }    </script>
//css样式 
 <style type="text/css">        .auto-style1 {            width: 34%;            height: 30px;        }        td {            border: 2px solid black;        }        .auto-style2 {            width: 64px;        
        .auto-style3 {            width: 13px;        }    </style>

//boby代码
<body>    姓名：<input id="txtname" type="text" />    <input id="btnsave" type="button" value="添加" />    <input id="btnupdate" type="button" value="修改" />    <input id="btndelete" type="button" value="删除" />    <table id="data" style="text-align: center" class="auto-style1">        <tr>            <td class="auto-style2">选 择</td>            <td>姓 名</td>        </tr> </table></body>

JavaScript实现数据的增删改,动态操作表格数据,
阅读全文
0 0