js动态添加与删除表格元素 2018-08-12 今日雨

最新推荐文章于 2024-05-16 16:52:30 发布

转载最新推荐文章于 2024-05-16 16:52:30 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jxh-blog/p/9463871.html

文章标签：

#java

本文提供了一个JavaScript中DOM操作的具体示例，包括创建元素、添加属性、插入和删除表格行及单元格等基本操作，并附带完整的HTML代码。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,table,th,td,input{font-size: 12px;}
        #tabScore{border-collapse: collapse}
        #tabScroe th{padding: 5px}
        #tabScore td{padding: 5px}
    </style>
</head>


<script>
  function addScore(){
      var name=document.getElementById("username").value;
      var java=document.getElementById("java").value;
      var html=document.getElementById("html").value;
      var sql=document.getElementById("sql").value;
      var count=parseInt(java)+parseInt(html)+parseInt(sql);
      var tab=document.getElementById("tabScore");
      var row=tab.insertRow();
      
      var td_name=row.insertCell();
      td_name.style.textAlign="center";
      td_name.innerText=name;
      var td_java=row.insertCell();
      td_java.style.textAlign="center";
      td_java.innerText=java;
      var td_html=row.insertCell();
      td_html.style.textAlign="center";
      td_html.innerText=html;
      var td_sql=row.insertCell();
      td_sql.style.textAlign="center";
      td_sql.innerText=sql;
      var td_count=row.insertCell();
      td_count.style.textAlign="center";
      td_count.innerText=count;
      var del=document.createElement("input");//创建input删除按钮
      del.setAttribute("type","button");//或者del.type="button";del.value="删除"
      del.setAttribute("value","删除");
      del.setAttribute("onclick","del(this)")
    //   del.type="button";
    //   del.value="删除";
      var td_del=row.insertCell();
      td_del.style.textAlign="center";
      td_del.appendChild(del);
  }
  function del(r){
    var i=r.parentNode.parentNode.rowIndex;//找出要删除的行索引
     var tab=document.getElementById("tabScore");
        tab.deleteRow(i);
  }
</script>

<body>
   姓名：<input type="text"id="username" size="10"/>
   java:<input  type="text" id="java" size="3" maxlength="2"/>
   Html:<input  type="text" id="html" size="3" maxlength="2"/>
   sql:<input  type="text" id="sql" size="3" maxlength="2"/>
   <input type="button" value="添加" onclick="addScore()">
   <hr size="1">
   <table id="tabScore" width="470" border="1"bordercolor="#003399">
       <tr bgcolor="#09f">
           <th>姓名</th>
           <th>java</th>
           <th>html</th>
           <th>sql</th>
           <th>总成绩</th>
           
       </tr>
   </table>

</body>

</html>