操作表格删除、修改、复制

最新推荐文章于 2022-01-11 22:00:55 发布

Tangayi

最新推荐文章于 2022-01-11 22:00:55 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/Tangayi/article/details/81085798

版权

<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;
}
.first{text-align: center;font-weight: 700; background-color: #ccc;}
      
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td >书名</td>
    <td>价格</td>
  </tr>
  <tr>
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr>
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" />
<input onclick="cut()" name="b2" type="button" value="删除第二行" />
<input  onclick="mod()" name="b3" type="button" value="修改标题样式" />
<input onclick="str()" name="b4" type="button" value="复制最后一行" />

<script type="text/javascript">
	function str(){
		var tab = document.querySelector("table tbody");
		var lastTr = tab.querySelector("tr:last-child");
		    var node = lastTr.cloneNode(true);
		    tab.appendChild(node);
	}
	function cut(){
		var tab = document.querySelector("table tbody");
		var secondTr = tab.querySelector("tr:nth-child(2)");
		tab.removeChild(secondTr);
	}
	function mod(){
		var tab = document.querySelector("table tbody");
		var fistTr = tab.querySelector("tr:nth-child(1)");
		fistTr.className = "first";
	}
</script>

</body>

Tangayi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
操作表格删除、修改、复制

&lt;title&gt;操作表格&lt;/title&gt;&lt;style type="text/css"&gt;body{ font-size:13px; line-height:25px; }table{ border-top: 1px solid #333; border-left: 1px solid #333; width:300px;}td{ borde...
复制链接

扫一扫