请教jquery 对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。 谢谢。如下补充

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了请教jquery 对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。 谢谢。如下补充相关的知识,希望对你有一定的参考价值。

型号 厂商 数量 封装 批号 供应商 单价 操作
asdf 原装 asdf 0 123 上移 下移 删除
model004 原装 asdasda 0 11 上移 下移 删除
model001 信息技术 原装 dasdas 0 25 上移 下移 删除
model002 信息技术 原装 dasdas 0 26 上移 下移 删除
model003 信息技术 原装 dasdas 0 11 上移 下移 删除
asdasd 原装 sadasdas 0 11 上移 下移 删除
pplid001 信息技术 原装 fengzhuang 0 11 上移 下移 删除
pplid002 信息技术 原装 fengzhuang 0 29 上移 下移 删除
pplid003 信息技术 原装 fengzhuang 0 44 上移 下移 删除
pplid004 信息技术 原装 fengzhuang 0 11 上移 下移 删除
pplid005 信息技术 原装 fengzhuang 0 11 上移 下移 删除
pplid006 信息技术 原装 fengzhuang 0 121 上移 下移 删除
jquery有这些操作的么。我要怎么换。要拿2行的ID去交换。我用easyui做的。不过好像是可以用jquery做这些操作。不过不太会jquery

参考技术A deleteRow()删除行
.prev()上移
.next()下移

jQuery对表格的操作示例

jQuery实现对表格数据进行增加,删除和修改

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>11111111111</title>
       <style>
           .hide {
               display: none;
           }
           /*遮罩层*/
           .cover {
               position: fixed;
               top: 0;
               right: 0;
               left: 0;
               bottom: 0;
               background-color: black;
               opacity: 0.8;
               z-index: 999;
           }
           .modal {
               position: fixed;
               top: 50%;
               left: 50%;
               height: 200px;
               width: 400px;
               margin-top: -100px;
               margin-left: -200px;
               background-color: white;
               z-index: 1000;
           }
       
</style>
   </head>
   <body>
       <button id="add">新增</button>
       <table border="1">
           <thead>
               <tr>
                   <th>#</th>
                   <th>姓名</th>
                   <th>爱好</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>1</td>
                   <td>Egon</td>
                   <td>街舞</td>
                   <td>
                       <button>编辑</button>
                       <button>删除</button>
                   </td>
               </tr>
               <tr>
                   <td>2</td>
                   <td>Alex</td>
                   <td>烫头</td>
                   <td>
                       <button>编辑</button>
                       <button>删除</button>
                   </td>
               </tr>
               <tr>
                   <td>3</td>
                   <td>苑局</td>
                   <td>日天</td>
                   <td>
                       <button>编辑</button>
                       <button>删除</button>
                   </td>
               </tr>
           </tbody>
       </table>
       <div id="myCover" class="cover hide"></div>
       <div id="myModal" class="modal hide">
           <div>
               <p>
                   <label for="modal-name">姓名</label>
                   <input type="text" id="modal-name">
               </p>
               <p>
                   <label for="modal-habit">爱好</label>
                   <input type="text" id="modal-habit">
               </p>
               <p>
                   <button id="modal-submit">提交</button>
                   <button id="modal-cancel">取消</button>
               </p>
           </div>
       </div>
       <script src="./jquery-3.3.1.min.js"></script>
       <script>
           function showModal() { //定义函数实现显示模态框
               $("#myCover,#myModal").removeClass("hide");
           }
           function closeModal() { //定义函数实现隐藏模态框
               $("#myCover,#myModal").addClass("hide");
           }
            // --------------------------------------------------------------------------点击编辑按钮------------------------------------------------------------------------
           $("tbody").on("click", ".edit-btn", function() { //事件委托解决新增加的数据没绑定事件
               showModal();
               //    原有的值填到模态框里面
               var $currentEle = $(this).parent().parent();
               var name = $currentEle.children().eq(1).text(); //或者 var name = $(this).parent('td').prev().prev().text();
               var habit = $currentEle.children().eq(2).text(); //或者 var habit = $(this).parent('td').prev().text();
               $("#modal-name").val(name);
               $("#modal-habit").val(habit);
               $("#myModal").data("currenttr", $currentEle); //值保存起来用来判断后面的条件是新增加的还是编辑的模态框
           });
            // -----------------------------------------------------------------------点击新增按钮-------------------------------------------------------------------------
            // 1. 弹出模态框
           $("#add").on("click", function() {
               showModal();
           });
            //-------------------------------------------------------------------------- 删除按钮---------------------------------------------------------------------------
            // 1. 删除当前行
           $("tbody").on("click", ".delete-btn", function() {
               // this指向的是实际触发事件的元素
               $(this).parent().parent().nextAll().each(function() { //当前行后面的所有的tr,依次更新
                   var oldNumber = $(this).children().first().text();
                   $(this).children().first().text(oldNumber - 1); //删除行的后面的序号都减去一
               });
               $(this).parent().parent().remove();
           });
            //------------------------------------------------------------------------ 模态框中有取消按钮-------------------------------------------------------------------
            // 1. 清空模态框中input的值
            // 2. 关闭模态框
           $("#modal-cancel").on("click", function() {
               $("#myModal").find("input").val("");
               //      $("#myModal input").val("");
               closeModal(); //隐藏模态框
           });
            // -----------------------------------------------------------------------------模态框中的提交按钮-----------------------------------------------------------
            // 取到用户的输入
           $("#modal-submit").on("click", function() {
               var name = $("#modal-name").val();
               var habit = $("#modal-habit").val();
               // 1. 判断是新增操作还是编辑操作
               var $currenttrEle = $("#myModal").data("currenttr");
               if ($currenttrEle !== undefined) { //有值,说明是编辑状态
                   $currenttrEle.children().eq(1).text(name);
                   $currenttrEle.children().eq(2).text(habit);
                   $("#myModal").removeData();
               } else {
                   // 如果是新增操作
                   // 1. 创建一个新的tr标签,把用户的数据填进去,再添加到tbody最后
                   var trEle = document.createElement("tr");
                   var number = $("tr").length;
                   $(trEle).html("<td>" + number + "</td>" +
                       "<td>" + name + "</td>" +
                       "<td>" + habit + "</td>" +
                       '<td><button>编辑</button><button>删除</button></td>');
                   $("tbody").append(trEle);
                   $("#myModal").find("input").val(""); //查找效率高
               }
               closeModal(); //关闭模态框
           });
       
</script>
   </body>
</html>



jQuery对表格的操作示例


以上是关于请教jquery 对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。 谢谢。如下补充的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 对带有checkbox的table操作 遍历选中的行的某一列的数据

JQuery对表格进行操作的常用技巧总结

jQuery对表格的操作示例

请教如何用JQuery导入导出excel表格

2020/6/3 JS 对表格元素进行增删改操作和事件监听

2020/6/3 JS 对表格元素进行增删改操作和事件监听