JavaScript 用按钮增，删，改

甘又刻

已于 2022-11-22 19:40:36 修改

阅读量516

点赞数

文章标签： javascript

于 2022-11-15 19:17:48 首次发布

本文链接：https://blog.csdn.net/weixin_65740259/article/details/127871913

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .datalist{
      border:1px solid #0058a3;/*表格边框*/
      font-family:Arial;
      border-collapse:collapse;  /*边框重叠*/
      backqround-color:#eaf5ff; /*表格背景色 */
      font-size:14px;
    }
    .datalist caption{
      padding-bottom:5px;
      font-size:14px;
      text-align:left;
    }
    .datalist th{
      border:1px solid #0058a3;
      /*行名称边框*/
      background-color:#4bacff;
      /*行名称背景色*/
      color:#FFFFFF;
      /*行名称颜色*/
      font-weight:bold;
      padding-top:4px; padding-bottom:4px;
      padding-left:12px; padding-right:12px;
      text-align:center;
    }
    .datalist td{
      border:1px solid #0058a3;
      text-aliqn:left;
      padding-top:4px; padding-bottom:4px;
      padding-left:10px; padding-right:10px;
    }
    .datalist tr:hover,
    .datalist tr.altrow{
      background-color:#c4e4ff;
    }
  </style>
  <script>
    window.onload=function(){
      let oTr =document.getElementById("member").insertRow(2);/*插入一行*/
      let aText = new Array();
      aText[0] = document.createTextNode("fresheggs");
      aText[1] = document.createTextNode("W610");
      aText[2] = document.createTextNode("Nov 5th");
      aText[3] = document.createTextNode("Scorpio");
      aText[4] = document.createTextNode("1038818");
      for(let i=0;i<aText.length;i++){
        let oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
      }
    }
  </script>
</head>

<body>
<table class="datalist" id="member">  <caption>Member List</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Class</th>
    <th scope="col">Birthday</th>
    <th scope="col">Constellation</th>
    <th scope="col">Mobile</th>
    <th scope="col">Delete</th>
  </tr>

  <tr>
    <td>lightyear</td>
    <td>W311</td>
    <td>Mar 23th</td>
    <td>Aries</td>
    <td>1002908</td>
  </tr>
  <tr class="lai">
    <td id="a">tom</td>
    <td id="b">w13</td>
    <td id="c">Jun 24th</td>
    <td id="d">Cancer</td>
    <td id="e">1118159</td>
  </tr>
</table>

<script>
  //删除
  function col(){
    let oTable = document.getElementById("member");
    oTable.deleteRow(1);
    oTable.row[1].deleteCell(0);//改
  }
  //增加
  function addtr(){
    var tab=document.getElementById('member');
    var tradd=tab.insertRow(1)
    tradd.style.background='member'
    tradd.innerHTML='<td >i</td><td></td><td></td><td></td><td></td>'
  }
  //修改
  function long() {
    let oTable = document.getElementById("a");
    var taa=oTable.innerText='a'
    let oTale = document.getElementById("b");
    var taaa=oTale.innerText='a'
    let oTble = document.getElementById("c");
    var taaaa=oTble.innerText='wad'
    let oable = document.getElementById("d");
    var taaaaa=oable.innerText='dashu'
    let Table = document.getElementById("e");
    var taaaaaa=Table.innerText='1086'
  }
</script>
<p>
  <input type="button" value="增加行" onclick="addtr()"/>
  <input type="button" value="删除行" onclick="col()"/>
  <input type="button" value="修改" onclick="long()"/>
</p>

</body>
</html>

修改不是动态的，因为懒所有没搞。js修改应要用for和.....

甘又刻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 用按钮增，删，改

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .datalist{ border:1px solid #0058a3;/*表格边框*/ font-family:Arial; border-collapse:collapse; /*边
复制链接

扫一扫