<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="增加一行" ο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="¥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="删除商品成功!" }