jquery动态增删表格行，获取输入内容并发送

最新推荐文章于 2024-04-25 10:35:23 发布

steering_ly

最新推荐文章于 2024-04-25 10:35:23 发布

阅读量136

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_28260501/article/details/111604379

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML和JavaScript实现一个简单的网页应用，包含添加按钮和保存按钮，以及一个动态表格。用户可以通过添加按钮在表格中插入新行，输入姓名、性别和年龄等信息，并能通过删除按钮移除表格行。点击保存按钮时，程序会收集表格数据并准备进行POST请求，但实际发送请求的部分未给出。

摘要由CSDN通过智能技术生成

首先html布局

一个添加按钮，一个保存按钮，然后一个表格

<body>
 
 <div class="container col-md-12">
  <br/><br/>
  <div class="container col-md-1">
   <button id="addBtn" class="btn btn-primary">添加</button>
  </div>
  <div class="container col-md-1">
   <button id="submitBtn" class="btn btn-primary">保存</button>
  </div>
  <div>
   <table id="table1" class="table table-bordered table-striped">
    <thead>
     <tr>
      <td>序号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>操作</td>
     </tr>
    </thead>
    <tbody>
    </tbody>
   </table>
  </div>
 </div>
</body>

在这里插入图片描述

js代码

<script type="text/javascript">
  $(document).ready(function(){
   $('#addBtn').click(function(){
    var tbody_len=$('#table1 tbody tr').length;//tbody的行数
    var index=tbody_len+1;
    var append_str='<tr>'+
        '<td>'+index+'</td>'+//序号
        '<td>'+'<input type="text"/>'+'</td>'+
        '<td>'+'<input type="text"/>'+'</td>'+
        '<td>'+'<input type="text"/>'+'</td>'+
        '<td>'+'<button class="btn delRow" style="font-size:10px;padding:0px;" type="button" οnclick="del(this)">删除</button>'+'</td>'+
          '</tr>';
    $("#table1 tbody").append(append_str);
   });
  
   $('#submitBtn').click(function(){
    var tbody_len=$('#table1 tbody tr').length;
   
    var value='';
    for(var i=0;i<tbody_len;i++){
     var name=$("#table1 tbody tr").eq(i).children("td").eq(1).find("input").val();
     var sex=$("#table1 tbody tr").eq(i).children("td").eq(2).find("input").val();
     var age=$("#table1 tbody tr").eq(i).children("td").eq(3).find("input").val();
     var info='{"name":'+name+','+'"sex":'+sex+','+'"age":'+sex+'}';
    }

    //以下是post发送，采用ajax简写方式
    $.post(url,{formName:value},function(data,status){
    
    });
   });
  });
  function del(obj){
   var tbody_len=$('#table1 tbody tr').length;//tbody的行数
   var del_tr=$(obj).parent().parent();//需要删除的行
   var del_tr_index=del_tr.children('td').eq(0).text();//需要删除的行的行号
   del_tr.remove();
   for(var i=Number(del_tr_index);i<tbody_len;i++){//重新排列删除行以下的行号
    $('#table1 tbody').children('tr').eq(i-1).children('td').eq(0).html(i);
   }
  }
 </script>

在这里插入图片描述

steering_ly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动态增删表格行，获取输入内容并发送

首先html布局一个添加按钮，一个保存按钮，然后一个表格<body> <div class="container col-md-12"> <br/><br/> <div class="container col-md-1"> <button id="addBtn" class="btn btn-primary">添加</button> </div> <div class="c
复制链接

扫一扫