CSS之表格操作
2015-10-31 22:52
615 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>操作表格</title> <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; } </style> <script type="text/javascript"> function addRow(){ var fRow=document.getElementById("row3"); var newRow=document.createElement("tr") ; //创建行节点 var col1=document.createElement("td"); //创建单元格节点 col1.innerHTML="幸福从天而降"; //为单元格添加文本 var col2=document.createElement("td"); col2.innerHTML="¥18.50"; col2.setAttribute("align","center"); newRow.appendChild(col1); //把单元格添加到行节点中 newRow.appendChild(col2); document.getElementById("row3").parentNode.insertBefore(newRow,fRow); //把行节点添加到表格末尾 } function updateRow(){ var uRow=document.getElementById("row1"); //标题行设置为字体加粗、文本居中显示,背景颜色为灰色 uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;"); } function delRow(){ var dRow=document.getElementById("row2"); //访问被删除的行 dRow.parentNode.removeChild(dRow); //删除行 } function copyRow(){ var oldRow=document.getElementById("row3"); //访问复制的行 var newRow=oldRow.cloneNode(true); //复制指定的行及子节点 document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行 } </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>追风筝的人</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()"/> <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" /> </body> </html>
相关文章推荐
- boostrap预定义样式风格
- 菜鸟好文推荐(二十)——14个最佳的HTML/CSS设计和开发框架
- subline tex2 安装css插件
- CSS专题之浮动
- 多样式cell排列使用
- CSS 使用小结
- CSS选择器
- 纯CSS3制作九款可爱复古相机
- IE7浏览器下CSS属性选择器二三事
- CSS position绝对定位absolute relative
- div+css创建导航栏
- css3中transform和transition的用法
- CSS专题之动画
- CSS清除浮动和定位
- IE6、IE7、IE8的CSS、JS兼容
- CSS垂直居中
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- CSS继承
- 嵌入式css样式,写在当前的文件中
- 内联式css样式,直接写在现有的HTML标签中