简单实现 table编辑、添加和删除操作

最新推荐文章于 2023-08-31 16:34:18 发布

冒烟筒

最新推荐文章于 2023-08-31 16:34:18 发布

阅读量448

点赞数 1

分类专栏： JavaScript H5 jQuery 文章标签： js jquery html5

本文链接：https://blog.csdn.net/Smokestack/article/details/109615167

版权

JavaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js" type="application/javascript"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        -moz-user-select: none; /*支持Firefox浏览器*/
        -webkit-user-select: none; /*支持Chrome，Opera，Safari等浏览器*/
        -ms-user-select: none; /*支持IE浏览器*/
        user-select: none;
        -webkit-text-size-adjust: none;
    }

    .box {
        width: 1000px;
        height: 300px;
    }

    #table td, th {
        height: 50px;
    }

    #table input,
    #table select {
        width: 88%;
        padding: 5px;
    }
    #add {
        margin: 20px;
    }
</style>
<body>
<div class="box">
    <button id="add" onClick="add()">添加</button>
    <table id="table" border="1px" width="100%" align="center" cellpadding="1" cellspacing="0px">
        <tr>
            <th width="10%">姓名</th>
            <th width="15%">与户主关系</th>
            <th width="15%">联系方式</th>
            <th width="20%">证件类型</th>
            <th width="25%">证件号码</th>
            <th width="15%">操作</th>
        </tr>
    </table>
</div>
</body>
<script>
  $(function () {
    var list = [
      {
        name: "张三",
        relationship: "父子",
        contact: "15496545464",
        IDType: "身份证",
        IDNo: "356656894664687",
      },
      {
        name: "王二",
        relationship: "父女",
        contact: "15496545464",
        IDType: "身份证",
        IDNo: "356656894664687",
      },
      {
        name: "李四",
        relationship: "父子",
        contact: "15496545464",
        IDType: "身份证",
        IDNo: "356656894664687",
      },
    ]
    for (let i = 0; i < list.length; i++) {
      add(list[i])
    }
  })

  /**添加一行*/
  function add(obj) {
    var form = obj || {
      name: "",
      relationship: "",
      contact: "",
      IDType: "",
      IDNo: "",
    };
    var result = "";
    result += "<tr>";
    result += "<td align=\"center\">" + form.name + "</td>";
    result += "<td align=\"center\">" + form.relationship + "</td>";
    result += "<td align=\"center\">" + form.contact + "</td>";
    result += "<td align=\"center\">" + form.IDType + "</td>";
    result += "<td align=\"center\">" + form.IDNo + "</td>";
    result += "<td  align=\"center\"><button class='edit'>编辑</button> <button onClick=\"del(this)\">删除</button></td>";
    result += "</tr>";
    $("#table").append(result);
  }

  /**删除一行*/
  function del($this) {
    $($this).parent().parent().remove();
  }

  $(function () {
    $(".edit").click(function(e){
      console.log(e);
      edit(e.target)
    });

  })
  /**编辑一行*/
  function edit($this) {
    let tdList = $($this).parent().parent()[0].children;
    if ($this.innerHTML === '编辑') {
      $this.innerHTML = '保存';
      for (let i = 0; i < tdList.length; i++) {
        if (i < 5) {
          var str = "";
          var IDTypes = [
            {
              name: "身份证",
              id: "1"
            },
            {
              name: "驾驶证",
              id: "2"
            },
            {
              name: "护照",
              id: "3"
            },
            {
              name: "士官证",
              id: "4"
            },
            {
              name: "港澳通行证",
              id: "5"
            },
          ];
          if (i === 3) {
            let IDs = ""
            for (let j = 0; j < IDTypes.length; j++) {
              if (IDTypes[j].name === tdList[i].innerHTML) {
                IDs += "  <option selected value=" + IDTypes[j].name + ">" + IDTypes[j].name + "</option>"
              } else {
                IDs += "  <option value=" + IDTypes[j].name + ">" + IDTypes[j].name + "</option>"
              }
            }
            str += "<select>" + IDs + "</select>"
          } else {
            str += "<input type=\"text\" value=" + tdList[i].innerHTML + ">";
          }
          tdList[i].innerHTML = str
        }
      }
    } else if ($this.innerHTML === '保存') {
      for (let i = 0; i < tdList.length; i++) {
        if (i < 5) {
          tdList[i].innerHTML = tdList[i].firstChild.value
        }
      }
      $this.innerHTML = '编辑'
    }
  }
</script>
</html>

冒烟筒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实现 table编辑、添加和删除操作

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
复制链接

扫一扫