html 实现表格搭配bootstrap模态窗的提交&回显

原创于 2021-08-02 10:40:06 发布 · 715 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #bootstrap #jquery

新手之路专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Bootstrap和jQuery实现的表格编辑功能。通过点击表格行的编辑按钮，可以在模态窗中回显并编辑表格内容，提交后更新表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本页面实现了：
1.点击表格tr行的操作按钮，弹出模态窗
2.表格内容会显示到模态窗上（回显）
3.在模态窗编辑，提交后会更改表格的值，且模态窗关闭

需要：

bootstrap（v4.6这是我使用的，低版本也ok）的模态窗
Jquery的方法需要了解：

children()
parents()
val()
text()
click()
eq()

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Hello, Bootstrap Table!</title>

  <!--引入样式-->
  <link href="bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="bootstrap/fontawesome.css" rel="stylesheet">
  <!--引入js-->
  <script src="bootstrap/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/bootstrap.min.js"></script>
  <script src="bootstrap/popper.min.js"></script>

</head>
<body>
<div class="container">

  <table data-toggle="table" >
    <!--表格标题-->
    <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    </thead>
    <!--表格内容-->
    <tbody id="tbody">
    <tr>
      <td>1</td>
      <td>小王</td>
      <td>25</td>
      <td>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop" data-param="13"
                onclick="edit(this)">编辑
        </button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>小张</td>
      <td>26</td>
      <td>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop" data-param="13"
                onclick="edit(this)">编辑
        </button>
      </td>
    </tr>
    </tbody>

  </table>
</div>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">x</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="form-group" id="body">
          <input type="hidden" name="index" id="index" value="">
          <span id="temp" style="display: none" ></span>
          <label for="name">姓名：</label>
            <input type="text" name="name" placeholder="请输入..." id="name" class="form-control"><br/>
          <label for="age">年龄：</label>
            <input type="text" name="age" placeholder="请输入..." id="age" class="form-control"><br/>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close">关闭</button>
        <button type="button" class="btn btn-danger" id="reset" onclick="reset()">重置</button>
        <button type="button" class="btn btn-success" id="submit" onclick="submit()" >提交</button>
      </div>

    </div>
  </div>
</div>

<script>
  function edit(obj) {
    //获取父窗口的值
    let tb_params = [];
    let $td = $(obj).parents('tr').children('td');
    for (let i = 0; i < $td.length; i++) {
      tb_params.push($td.eq(i).text());
    }
    tb_params.length = tb_params.length-1;
    //渲染模态窗
    let $input = $("#body").children('input');
    for (let i = 0; i < tb_params.length; i++) {
      $input.eq(i).val(tb_params[i]);
    }
    //存储初始值
    console.log(tb_params.toString());
    $("#temp").text(tb_params.join(","));
  }
  function reset() {
    //获取初始值
    let tb_params = $("#temp").text().split(",");
    console.log(tb_params);
    //渲染模态窗
    let $input = $("#body").children('input');
    for (let i = 0; i < tb_params.length; i++) {
      $input.eq(i).val(tb_params[i]);
    }
  }

  function submit() {
    //获取模态窗的值
    let modal_params = [];
    let $input = $("#body").children('input');
    for (let i = 0; i < $input.length; i++) {
      modal_params.push($input.eq(i).val());
    }
    //渲染父窗口的值
    //遍历tr，如果是对应index的话就赋值
    let $tr = $("#tbody").children('tr');
    for (let i = 0; i < $tr.length; i++) {
      let $td =$tr.eq(0).children('td');
      if ($td.eq(i).text()===modal_params[0]){
        for (let j = 0; j < $td.length; j++) {
          $td.eq(j).text(modal_params[j]);
        }
      }
    }
    $("#close").click();
  }
</script>
</body>
</html>