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

最新推荐文章于 2022-03-08 23:43:10 发布

weixin_30809333

最新推荐文章于 2022-03-08 23:43:10 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/914556495wxkj/p/3426594.html

版权

<style type="text/css">
body{
    font-size:13px;
    line-height:25px;
    }
table{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    width: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="增加一行" οnclick="addRow()" />
<input name="b2" type="button" value="删除第2行"  οnclick="delRow()"/>
<input name="b3" type="button" value="修改标题"  οnclick="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="删除商品成功！" 
}

转载于:https://www.cnblogs.com/914556495wxkj/p/3426594.html

weixin_30809333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table动态添加删除一行和改变标题

<style type="text/css">body{ font-size:13px; line-height:25px; }table{ border-top: 1px solid #333; border-left: 1px solid #333; width:300px;}td{ ...
复制链接

扫一扫