jQuery实现表格嵌套表单

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>bootstrap</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="https://unpkg.com/vue/dist/vue.js"></script>
   </head>
   <body>
       <form align="center">
           姓名:<input type="text" id="name"/>
           班级:<input type="text" id="clazz"/>
           学号:<input type="text" id="shcool"/>
           性别:<select id="sex">
               <option>男</option>
               <option>女</option>
           </select>
           <input type="button" id="save" value="保存">
           <input type="button" id="allEdit" value="确认修改">
           <input type="hidden" id="yincang">
           <br>
           <br>

       <table border="1px solid black" cellspacing="0px" align="center" cellpadding="15px">
           <thead>
               <th>序号</th>
               <th>姓名</th>
               <th>班级</th>
               <th>学号</th>
               <th>性别</th>
               <th>删除</th>
               <th>编辑</th>
           </thead>
           <tbody id="tbody">
           </tbody>
       </table>
   </form>
       <script>
           var i = 0
           var aff = []
           var tbody = $("#tbody")
           var save = $("#save")
           save.on("click",function(){
               i++;
               aff.push(i)
               var tr = $("<tr></tr>")
               var td0 = $("<td>" + i + "</td>")
               var td1 = $("<td>" + $("#name").val() + "</td>")
               var td2 = $("<td>" + $("#clazz").val() + "</td>")
               var td3 = $("<td>" + $("#shcool").val() + "</td>")
               var td4 = $("<td>" + $("#sex").val() + "</td>")
               var td5 = $("<td>" + "<input type='button' value='删除' id='delete'>" + "</td>")
               var td6 = $("<td>" + "<input type='button' value='修改' id='edit'>" + "</td>")
               tbody.append(tr)
               tr.append(td0).append(td1).append(td2).append(td3).append(td4).append(td5).append(td6)

                   //动态绑定删除按钮
               td5.on("click","#delete",function(){
                   $(this).parent().parent().remove()
                   aff.pop()
                   for(i = 0; i < aff.length; i++){
                       $("#tbody").children().eq(i).children().eq(0).html(aff[i]);
                   }
               })

               //编辑按钮
               //先取到表格里的HTML
               //再把取到的文本写到表单里面
               td6.on("click","#edit",function(){
                   $("#name").val($(this).parent().parent().children().eq(1).html())
                   $("#clazz").val($(this).parent().parent().children().eq(2).html())
                   $("#shcool").val($(this).parent().parent().children().eq(3).html())
                   $("#sex").val($(this).parent().parent().children().eq(4).html())
                   $("#yincang").val($(this).parent().parent().children().eq(0).html())

               $("#allEdit").on("click",function(){
                   for(var i = 0; i < $("#tbody").children().length; i++){
                           if($("#tbody").children().eq(i).children().eq(0).html() == $("#yincang").val()){
                               $("#tbody").children().eq(i).children().eq(1).html($("#name").val())
                               $("#tbody").children().eq(i).children().eq(2).html($("#clazz").val())
                               $("#tbody").children().eq(i).children().eq(3).html($("#shcool").val())
                               $("#tbody").children().eq(i).children().eq(4).html($("#sex").val())
                           }
                       }
                   })
               })


           })
       </script>
   </body>
</html>

jQuery实现表格嵌套表单

猜你喜欢