您的位置：首页 > 其它

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

2013-11-16 11:53 447 查看

<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">¥30.00</td>
</tr>
<tr id="row3">
<td>60个瞬间</td>
<td class="center">¥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="¥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="删除商品成功！"
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航