Js实现简单的表格内容添加

博客介绍了使用原生 JavaScript 实现简单表格内容添加的方法,涉及 HTML 代码、CSS 代码、JS 引用代码以及核心的 JS 代码编写。

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

我们来用原装js来实现一个简单的表格内容添加

html代码

<body>
  <table border="1" width="200" height="30" id="table">
      <tbody id="tb">
          <tr>
              <td>青椒肉丝</td>
              <td>很好吃</td>
          </tr>
      </tbody>
  </table>
  <div id="nc">
  <span>昵称:</span><input type="text" value="" id="txt">
  </div>
  <div>
      <textarea name="" id="text" cols="30" rows="10"></textarea>
      <input type="button" value="添加" id="btn">
  </div>
</body>

css代码

<style>
      tr{
          text-align: center;
      }
        #table{
            margin-bottom: 20px;
        }
        #nc{
            margin-bottom: 20px;
        }
    </style>

js引用代码

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

js代码

 window.onload=function(){
            var btn=my$("btn");
            btn.onclick=function(){
               var name=my$("txt").value;
               var ping=my$("text").value;
               var tr=document.createElement("tr");
               tr.innerHTML="<td>"+name+"</td>"+
                             "<td>"+ping+"</td>";
               var table=my$("table");
               var tbody=table.getElementsByTagName("tbody")[0];
               tbody.appendChild(tr);
            }
        }
    </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值