Js实现简单的表格内容添加_腾讯收集表js插入内容-优快云博客

本文链接：https://blog.youkuaiyun.com/DeviL_MCry/article/details/90582755

博客介绍了使用原生 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>