table动态添加删除一行和改变标题

<style type="text/css">
body{
    font-size:13px;
    line-height:25px;
    }
table{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    300px;
}
td{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    }
.center{
    text-align:center;
}
.title{
    text-align:center;
    font-weight:bold;
    background-color: #cccccc;
}
#displayInfo{
    color:red;
}
      
</style>
<script src="js/table.js"></script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行"  onclick="delRow()"/>
<input name="b3" type="button" value="修改标题"  onclick="updateRow()"/>
<div id="displayInfo"></div>
</body>

function addRow(){    
    var tableObj=document.getElementById("myTable");
    var rowNums=tableObj.rows.length;
    var newRow=tableObj.insertRow(rowNums);
    var col1=newRow.insertCell(0);
    col1.innerHTML="幸福从天而降";
    var col2=newRow.insertCell(1);
    col2.innerHTML="&yen;18.5";
    col2.align="center";
    var divInfo=document.getElementById("displayInfo");
    divInfo.innerHTML="添加商品成功！"
}
    
function updateRow(){
    var uRow=document.getElementById("myTable").rows[0];
    uRow.className="title";
}

function delRow(){
   document.getElementById("myTable").deleteRow(1);
   var divInfo=document.getElementById("displayInfo");
   divInfo.innerHTML="删除商品成功！" 
}

相关阅读:
为什么你SQL Server的数据库文件的Date modified没有变化呢？
SQL Server中SELECT会真的阻塞SELECT吗？
ORACLE从共享池删除指定SQL的执行计划
flink DataStream API使用及原理
漫谈九品中正制和现阶段阶层分层
flink dataset api使用及原理
从flink-example分析flink组件(3)WordCount 流式实战及源码分析
TODO supply a title
avalon2学习教程01
avalon1与avalon2的异同点

原文地址：https://www.cnblogs.com/914556495wxkj/p/3426594.html