AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Dom实操(第二十二课)表格静态创建到动态创建的过程

2023-07-16 92
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Dom实操(第二十二课)表格静态创建到动态创建的过程

Dom实操(第二十二课) 对表格对象的创建 CRUP

这篇文章我们要实现的功能如下  只有你想不到没有技术完成不了的数据

对表格数据从静态创建到动态创建的过程  同样这个属于实操

表格一

针对上面出现的问题你该如何解决

 

静态创建表格对数据进行修改 删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的增删改查</title>
</head>
<style>
    #ta tr {
        height: 35px;
    }
    #ta{
        margin: auto;
    }
    td{
        text-align: center;
    }
</style>
<body>
   <script type="text/javascript">
     // debugger
    // js操作表格信息学习:n 
    //!删除元素的信息内容
    function delRow(btn){
        // 父节点删除子节点
        // 获取table对象
        var ta=document.getElementById("ta")
        // var tr=document.getElementById("t1")
        var tr=btn.parentNode.parentNode;
        // 删除报错
        // ta.removeChild(tr)
        // 可以删除信息 出现的问题
        // ta.deleteRow(tr)
        // ta.deleteRow(1)
        ta.deleteRow(tr.rowIndex)
    }
    // 修改单元格的数量功能
    function updateRowTdNum(btn){
        // 获取单格的对象
        // var cell=document.getElementById("cell");
        // 单元格动态的改变
        // 获取行对象
        var tr=btn.parentNode.parentNode;
        console.log(tr)
        // 获取行对象 中的数组
        var cell=tr.cells[4];
        console.log(cell)
        // 判断cell.innerHtml的值是否为数字
        if(!isNaN(Number(cell.innerHTML))){
             // 修改单元格的值
             cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='U(this)'>"
        }
        function U(inp){
        // var cell=document.getElementById("cell")
        var cell=inp.parentNode;
        // 保存
        cell.innerHTML=inp.value
        }
    }
   </script>
    <h3 align="center">操作表格的属性信息学习</h3>
    <table border="1px" id="ta">
        <tr style="text-align:center ;font-weight: bolder;">
            <td width="100px">编号</td>
            <td width="200px">书名</td>
            <td width="100px">作者</td>
            <td width="100px">价格</td>
            <td width="100px">购买数量</td>
            <td width="200px">操作</td>
        </tr>
        <tr id="t1">
            <td width="100px">1</td>
            <td >java从入门到放弃</td>
            <td>wollow</td>
            <td>45.78$</td>
            <td>3</td>
            <td align="center">
                <input type="button" value="修改数量" onclick="updateRowTdNum(this)">
                <input type="button" value="删除数量" onclick="delRow(this)">
            </td>
        </tr>
        <tr>
            <td width="100px">2</td>
            <td>Spring入门到放弃</td>
            <td>乱码</td>
            <td>90$</td>
            <td>8</td>
            <td align="center">
                <input type="button" value="修改数量" onclick="updateRowTdNum(this)">
                <input type="button" value="删除数量" onclick="delRow(this)">
            </td>
        </tr>
        <tr>
            <td width="100px">3</td>
            <td>SpringBoot入门到放弃</td>
            <td>从容</td>
            <td>90$</td>
            <td>5</td>
            <td align="center">
                <input type="button" value="修改数量" onclick="updateRowTdNum(this)">
                <input type="button" value="删除数量" onclick="delRow(this)">
            </td>
        </tr>
        <tr>
            <td width="100px">4</td>
            <td>MysQL的数据库</td>
            <td>orlaio</td>
            <td>90$</td>
            <td>3</td>
            <td align="center">
                <input type="button" value="修改数量" onclick="updateRowTdNum(this)">
                <input type="button" value="删除数量" onclick="delRow(this)">
            </td>
        </tr>
    </table>
</body>
</html>

 

表格二

这个表格是便于初学者理解的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        tr {
            background-color: white;
        }
        table{
            margin: auto;
        }
        td{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .lei{
            color: red;
            background-color: black;
        }
    </style>
 <table cellspacing="1px" bgcolor="black">   
    <thead>
        <!-- 数组下标 -->
        <tr>
            <th class="lei">0</th>
            <th class="lei">1</th>
            <th class="lei">2</th>
            <th class="lei">3</th>
            <th class="lei">4</th>
            <th class="lei">5</th>
            <th class="lei">6</th>
            <th class="lei">7</th>
            <th class="lei">8</th>
        </tr>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身高</th>
            <th>体重</th>
            <th>QQ号</th>
            <th>技能</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
    // 数组中套用对象 创建模拟数据八条
    var arr = [
        {
        id:'1',
        name: '小鸡不好了',
        age: 23,
        sex:'男',
        height:'168'+"cm",
        weight:'107'+"kg",
        QQ:'2609875643',
        skills: '吃饭'
    },
    {
        id:'2',
        name: '小贵',
        age: 18,
        sex:'男',
        height:'178'+"cm",
        weight:'127'+"kg",
        QQ:'2679875643',
        skills: '吃饭'
    },
    {
        id:'3',
        name: '自由是哪里',
        age: 18,
        sex:'女',
        height:'178'+"cm",
        weight:'127'+"kg",
        QQ:'2679875643',
        skills: '吃饭'
    },
    {
        id:'4',
        name: '小小',
        age: 17,
        sex:'男',
        height:'178'+"cm",
        weight:'117'+"kg",
        QQ:'2679834643',
        skills: '王者'
    },
    {
        id:'5',
        name: '苹果',
        age: 18,
        sex:'男',
        height:'178'+"cm",
        weight:'127'+"kg",
        QQ:'2679875643',
        skills: '吃鸡'
    },
    {
        id:'6',
        name: 'SpruingBoot',
        age: 18,
        sex:'男',
        height:'178'+"cm",
        weight:'127'+"kg",
        QQ:'2679875643',
        skills: '后端开发'
    },
    {
        id:'7',
        name: 'JavaScript',
        age: 18,
        sex:'男',
        height:'178'+"cm",
        weight:'127'+"kg",
        QQ:'2679875643',
        skills: '通吃'
    },
    {
        id:'8',
        name: 'HelloWorld',
        age: 28,
        sex:'女',
        height:'179'+"cm",
        weight:'157'+"kg",
        QQ:'2679475643',
        skills: '睡觉人'
    }
    ]
    // var thead = document.querySelector('thead');
    var tbody = document.querySelector('tbody');
    // console.log(tbody) 获取tbody元素
    for (var i = 0; i < arr.length; i++) {//    根据数据创建行的
        // console.log("获取Y轴的行数"+i)
        // 创建tr元素
        var tr = document.createElement('tr')
        tbody.appendChild(tr);
        // console.log(tbody.appendChild)
        for (var k in arr[i]) {    //创建列的
            // console.log(i)
            // console.log(k)
            var td = document.createElement('td');
            console.log(td)
            // var trs=tr.cells[3]
            // console.log(trs)
            td.innerHTML = arr[i][k];
            console.log(arr[i][k])
            tr.appendChild(td);
        }
        // 每一行添加删除操作列
        var td = document.createElement('td');
        td.innerHTML=  '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
    }
    var a=document.querySelectorAll('a');       
    for(var i=0;i<a.length;i++){          //所有a循环添加点击事件
        a[i].addEventListener('click',function(){
            tbody.removeChild(this.parentNode.parentNode);
            //a的父亲是td    td的父亲才是tr  干掉他爷爷
        })
    }
</script>
</body>
</html>

请问下面的数据是不是好像呀

 // 数组中套用对象 创建模拟数据八条
 var arr = [
     {
     id:'1',
     name: '小鸡不好了',
     age: 23,
     sex:'男',
     height:'168'+"cm",
     weight:'107'+"kg",
     QQ:'2609875643',
     skills: '吃饭'
 },
 {
     id:'2',
     name: '小贵',
     age: 18,
     sex:'男',
     height:'178'+"cm",
     weight:'127'+"kg",
     QQ:'2679875643',
     skills: '吃饭'
 },
 {
     id:'3',
     name: '自由是哪里',
     age: 18,
     sex:'女',
     height:'178'+"cm",
     weight:'127'+"kg",
     QQ:'2679875643',
     skills: '吃饭'
 },
 {
     id:'4',
     name: '小小',
     age: 17,
     sex:'男',
     height:'178'+"cm",
     weight:'117'+"kg",
     QQ:'2679834643',
     skills: '王者'
 },
 {
     id:'5',
     name: '苹果',
     age: 18,
     sex:'男',
     height:'178'+"cm",
     weight:'127'+"kg",
     QQ:'2679875643',
     skills: '吃鸡'
 },
 {
     id:'6',
     name: 'SpruingBoot',
     age: 18,
     sex:'男',
     height:'178'+"cm",
     weight:'127'+"kg",
     QQ:'2679875643',
     skills: '后端开发'
 },
 {
     id:'7',
     name: 'JavaScript',
     age: 18,
     sex:'男',
     height:'178'+"cm",
     weight:'127'+"kg",
     QQ:'2679875643',
     skills: '通吃'
 },
 {
     id:'8',
     name: 'HelloWorld',
     age: 28,
     sex:'女',
     height:'179'+"cm",
     weight:'157'+"kg",
     QQ:'2679475643',
     skills: '睡觉人'
 }
 ]

表格三

这个表格是我用JavaScript动态创建出来的

 

表格四

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格的增删改查</title>
    <style>
        table {
            text-align: center;
            border-collapse: collapse;
            border: 1px solid gray;
        }
        #tr1 {
            background: #99d6ff;
        }
        a {
            text-decoration: none;
            color: black;
        }
    </style>
    <script>
        window.onload = function () {
            var res = document.getElementById('res')
            var oTab = document.getElementById('table1')
            var oName = document.getElementById('name')
            var oAge = document.getElementById('age')
            var oBtn = document.getElementById('btn')
            var oSearch = document.getElementById('search')
            var oSearchBtn = document.getElementById('searchBtn')
            var id = oTab.tBodies[0].rows.length//定义序号变量
            oBtn.onclick = function () {
                var oTr = document.createElement('tr')
                var oTd = document.createElement('td')
                oTd.innerHTML = id++
                oTr.appendChild(oTd)
                var oTd = document.createElement('td')
                oTd.innerHTML = oName.value
                oTr.appendChild(oTd)
                var oTd = document.createElement('td')
                oTd.innerHTML = oAge.value
                oTr.appendChild(oTd)
                var td3 = document.createElement('td');
                oTr.appendChild(td3);
                td3.innerHTML = '更改';
                td3.style.cursor = 'pointer';
                td3.onclick = function () {
                    var ce = this.parentNode.cells;
                    if (/.*更改.*/.test(td3.innerHTML)) {
                        for (var i = 0; i < ce.length - 2; i++) {
                            var txt = document.createElement('input');
                            txt.type = 'text';
                            var ci = ce[i];
                            txt.value = ci.innerHTML;
                            ci.innerHTML = ' ';
                            ci.appendChild(txt);
                        }
                        td3.innerHTML = '保存';
                    }
                    else {
                        for (var i = 0; i < ce.length - 2; i++) {
                            var ci = ce[i];
                            ci.innerHTML = ci.children[0].value;
                        }
                        td3.innerHTML = '更改';
                    }
                }//更改
                var oTd = document.createElement('td')
                oTd.innerHTML = '<a href="#">删除</a>'
                oTr.appendChild(oTd)//添加表格行
                oTd.getElementsByTagName('a')[0].onclick = function () {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode)
                }//删除表格行
                oTab.tBodies[0].appendChild(oTr)
            }
            oSearchBtn.onclick = function () {
                for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var sTxt = oSearch.value.toLowerCase()
                    var attr = sTxt.split('')
                    oTab.tBodies[0].rows[i].style.background = ''
                    for (var j = 0; j < attr.length; j++) {
                        if (sTab.search(attr[j]) != -1) {
                            oTab.tBodies[0].rows[i].style.background = '#99d6ff';
                        }
                    }
                }
            }//模糊搜索，多关键字搜索
            res.onclick = function () {
                document.getElementById('form').reset();
                //重置
            }
        }
    </script>
</head>
<body>
    <form id="form">
        name：<input type="text" id="name" placeholder="请输入姓名">
        age：<input type="text" id="age" placeholder="请输入年龄">
    </form>
    <br>
    <input type="reset" id='res'>
    <input id="btn" type="button" value="添加"><br><br>
    <input type="text" id="search" placeholder="请输入你的姓名">
    <input type="button" id="searchBtn" value="搜索"><br><br>
    <table id="table1" border="1" width="800px">
        <tr id="tr1">
            <td>ID</td>
            <td>name</td>
            <td>age</td>
            <td>change</td>
            <td>delete</td>
        </tr>
    </table>
</body>
</html>

表格五

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>成绩管理</title>
  <style>
    body {
      margin: 0;
      font: normal 20px "Microsoft YaHei";
      color: #0C0C0C;
      font-size: 14px;
      line-height: 20px;
    }
    .ui_txt {
      width: 60px;
      height: 16px;
      margin: 2px 2px 2px 5px;
      outline: 0;
      padding: 5px;
      border: 1px solid;
      border-color: #C0C0C0 #D9D9D9 #D9D9D9;
      border-radius: 2px;
      background: #FFF;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
      -webkit-transition: box-shadow, border-color .5s ease-in-out;
      -moz-transition: box-shadow, border-color .5s ease-in-out;
      -o-transition: box-shadow, border-color .5s ease-in-out;
    }
    #box_top {
      height: 37px;
      line-height: 37px;
      color: #fff;
      background: #044599;
      padding-left: 20px;
    }
    .ui_btn {
      margin: 6px;
      width: 80px;
      height: 30px;
      vertical-align: middle;
      line-height: 30px;
      text-align: center;
      border-style: none;
      cursor: pointer;
      font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
    }
    .ui_btn:hover {
      width: 80px;
      height: 30px;
      vertical-align: middle;
      line-height: 30px;
      text-align: center;
      border-style: none;
      cursor: pointer;
      font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
      color: #fff;
    }
    .table {
      padding: 0;
      margin: 0;
      position: relative;
      margin: 0 auto;
    }
    .table tr th {
      background: #044599 no-repeat;
      text-align: center;
      border: 1px solid #02397F;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 14px;
      color: #fff;
      height: 37px;
      border-collapse: collapse;
    }
    .table tr td {
      text-align: center;
      border-left: 1px solid #ECECEC;
      border-right: 1px solid #ECECEC;
      border-bottom: 1px solid #ECECEC;
      font-size: 15px;
      color: #909090;
      height: 37px;
    }
  </style>
</head>
<body>
  <script>
    function Student(Id, name, english, mathe_m, c, js, data_s) {
      this.Id = Id;
      this.name = name;
      this.c = parseFloat(c);
      this.js = parseFloat(js);
      this.english = parseFloat(english);
      this.mathe_m = parseFloat(mathe_m);
      this.data_s = parseFloat(data_s);
    }
    Student.prototype.summation = function () {
      return this.english + this.mathe_m + this.c + this.js + this.data_s;
    }
    var students = new Array();
    var count = 0;
    function getId(id) { return document.getElementById(id); }
    function SumShow() {
      with (form1) {
        if (elements[0].value == "" || elements[1].value == "") {
          getId('info').innerHTML = "******学号或姓名不能空！ ****** ";//存放提示信息的div 
          return;
        }
        for (var i = 2; i < 7; i++) {
          if (isNaN(elements[i].value) || parseFloat(elements[i].value) > 100 || parseFloat(elements[i]).value < 0 || elements[i].value == '') {
            getId('info').innerHTML = "成绩要在0到100之间，请重新输入！"
            return;
          }
        }
        var stu = new Student(elements[0].value, elements[1].value, elements[2].value, elements[3].value, elements[4].value, elements[5].value, elements[6].value);
        //document.getElementById('info').innerHTML=stu.no+stu.name+"的总分是"+stu.summation()+"<br>";
      }
      for (n in students) {
        if (students[n].Id == stu.Id) {
          getId('info').innerHTML = "学号重复!!!";
          return;
        }
      }
      addTable(stu);
      students[count] = stu;
      count++;
      getId('info').innerHTML = "";
    }
    function addTable(stu) {
      colsNum = 10;
      rlen = getId("cj").rows.length;
      rs = getId("cj").insertRow(rlen);
      for (i = 0; i < colsNum; i++)
        rs.insertCell(i);
      rs.cells[0].innerHTML = '<input name="ic" type="checkbox" value=' + stu.Id + ' onclick="single_check()" />';
      rs.cells[1].innerHTML = stu.Id;
      rs.cells[2].innerHTML = stu.name;
      rs.cells[3].innerHTML = stu.english;
      rs.cells[4].innerHTML = stu.mathe_m;
      rs.cells[5].innerHTML = stu.c;
      rs.cells[6].innerHTML = stu.js;
      rs.cells[7].innerHTML = stu.data_s;
      rs.cells[8].innerHTML = stu.summation();
      rs.cells[9].innerHTML = "<a id=" + stu.Id + " onclick='deleteScore(" + stu.Id + ")'>删除</a>";
      rs.onmouseover = function () { this.bgColor = "#ddd"; }
      rs.onmouseout = function () { this.bgColor = "#fff"; }
    }
    function deleteScore(ID) {
      var a = getId(ID)
      var i = a.parentNode.parentNode.rowIndex;
      getId("cj").deleteRow(i);
      for (n in students)
        if (students[n].Id == ID)
          students.splice(n, 1);
    }
    function all_check() {
      var oInput = document.getElementsByName("ic");
      for (i = 0; i < oInput.length; i++)
        if (getId('all').checked == true)  //全选按钮
          oInput[i].checked = true;// alert(oInput[i].value); 
        else
          oInput[i].checked = false;
    }
    function single_check() {
      var oInput = document.getElementsByName("ic");
      var j = 0;
      for (i = 0; i < oInput.length; i++)
        if (oInput[i].checked == true)
          j++;
      if (j == oInput.length)
        getId('all').checked = true;
      else
        getId('all').checked = false;
    }
    function removeRow() {
      var cheObj = document.getElementsByName("ic");
      //var taObj=document.getElementById("cj");
      if (confirm("确定要删除么？"))
        for (var k = 0; k < cheObj.length; k++) {
          var v = cheObj[k].value;
          if (cheObj[k].checked) {
            getId("cj").deleteRow(k + 1); //获取表格元素，删除对应 表格 的行
            for (n in students)
              if (students[n].Id == v)
                students.splice(n, 1);
            k = -1;
          }
        }
      getId('all').checked = false;
    }
  </script>
  <div id="box_top">学生成绩管理</div>
  <form name="form1">
    学号 :<input name="no" class="ui_txt">
    姓名 :<input name="name" class="ui_txt"><br />
    英语 :<input name="efield" class="ui_txt">
    高数 :<input id="高数" name="gs" type="text" class="ui_txt">
    C语言：<input name="c" class="ui_txt">
    动态脚本:<input name="js" class="ui_txt">
    数据结构 :
    <input name="sj" class="ui_txt" class="ui_txt"><br />
    <input type="button" value="显示总分" onClick="SumShow()" class="ui_btn">
    <input type="reset" value="重置" class="ui_btn">
  </form><br />
  <div id="info"></div>
  <table id="cj" class="table" cellspacing="0" cellpadding="0" width="100%" align="center">
    <caption style=" font-size:28px;line-height: 50px; color: blue ;">学生成绩信息统计表</caption>
    <tr>
      <th> <label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th>
      <th>学号</th>
      <th>姓名</th>
      <th>英语</th>
      <th>高数</th>
      <th>C语言</th>
      <th>动态脚本</th>
      <th>数据结构</th>
      <th>总分</th>
      <th>删除</th>
    </tr>
  </table>
  <input type="button" value="删除选中" onClick="removeRow()" class="ui_btn" />
  <script language="JavaScript">
    var msg = "欢迎来到成绩管理案例噢噢噢噢案例 ，方法无极限，快乐第一位"
    function scr() {
      document.title = msg;
      msg = msg.substring(1, msg.length) + msg.substring(0, 2);
    }
    setInterval("scr()", 500)
  </script>
</body>
</html>
文章标签：
JavaScript
前端开发
关键词：
dom表格
dom动态创建
dom实操
t75yjb52rsccc
目录
相关文章
hnrk7epeorhrk
|
7月前
|
JSON JavaScript 数据格式
技术好文：tabel表格的dom操作
技术好文：tabel表格的dom操作
hnrk7epeorhrk
31 0
东方睿赢
|
8月前
|
JavaScript 前端开发
JavaScript DOM 操作：如何动态创建和插入元素？
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
东方睿赢
58 2
t75yjb52rsccc
|
JavaScript 前端开发
Dom实操(第二十一课)
Dom实操(第二十一课)
t75yjb52rsccc
226 0
東方幻想鄉
|
8月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据，改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据，改变DOM
東方幻想鄉
91 0
前端杂货铺
|
JavaScript
DOM ------ 鼠标滑过表格的行变色效果
DOM ------ 鼠标滑过表格的行变色效果
前端杂货铺
95 0
t75yjb52rsccc
|
JavaScript
Dom实操(第二十三课)JS轮番图的设计思路
Dom实操(第二十三课)JS轮番图的设计思路
t75yjb52rsccc
132 0
t75yjb52rsccc
|
JavaScript
Dom对象总结案例实操(第二十课)（二）
Dom对象总结案例实操(第二十课)（二）
t75yjb52rsccc
79 0
t75yjb52rsccc
|
JavaScript
Dom对象总结案例实操(第二十课)（一）
Dom对象总结案例实操(第二十课)（一）
t75yjb52rsccc
75 0
前端杂货铺
|
JavaScript
DOM ------ 动态生成表格
DOM ------ 动态生成表格
前端杂货铺
104 0
明金同学
|
JavaScript
jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
明金同学
328 0
jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作