表格中关于td的操作

最近项目的需求中，有一条是关于 table 表格的，所以我就学习了一下有关 td 的操作，在这里分享一下。

td的单元格合并

有时候我们并不是按照标准的单元格来填写内容的，所以，这时候就需要使用但与那个的合并。

这是我们的标准单元格写法。

<table border="1">
	<tr>
		<th>第一列</th>
		<th>第二列</th>
		<th>第三列</th>
	</tr>
	<tr>
  		<td>100</td>
  		<td>200</td>
		<td>300</td>
	</tr>
	<tr>
		<td>400</td>
		<td>500</td>
		<td>600</td>
	</tr>
</table>

效果是这样的：

下面合并列单元格：

<table border="1">
	<tr>
		<th>第一列</th>
		<th>第二列</th>
		<th>第三列</th>
	</tr>
	<tr>
  		<td>200</td>
  		<td colspan="2" align="center">100</td>
	</tr>
	<tr>
		<td>400</td>
 		<td>500</td>
		<td>600</td>
	</tr>
</table>

接着合并行单元格

<table border="1">
	<tr>
		<th>第一列</th>
		<th>第二列</th>
		<th>第三列</th>
	</tr>
	<tr>
  		<td colspan="2" align="center">100</td>
  		<td rowspan="2" align="center">200</td>
	</tr>
	<tr>
		<td>400</td>
 		<td>500</td>
	</tr>
</table>

注意： 在使用 rowspan 这个属性时，只能在靠上一行的单元格中添加。

td调用js函数

我们项目中是需要对金钱进行计算，根据每个 td 单元格中的单价，计算最后的总价，并且显示在 td 单元格中。考虑到我们是不能在界面中对 table 表格进行操作的，所以，要在界面加载好之后直接调用 js 函数。

首先，需要给每个 td 单元格一个 id 值。

<table border="1">
	<tr>
		<th>人数</th>
		<th>单价</th>
		<th>总价</th>
	</tr>
	<tr>
  		<td id="number">100</td>
  		<td id="unitPrice">200</td>
  		<td id="totalPrice"></td>
	</tr>
</table>

然后，根据 id 获取相应td中的内容，这里需要使用 innerHTML 来实现获取td内的内容。

<script type="text/javascript">
	function calculate() {
		var number = document.getElementById('number').innerHTML;
		var unit_price = document.getElementById('unitPrice').innerHTML;
		var total_price = parseFloat(number)*parseFloat(unit_price);
		document.getElementById('totalPrice').innerHTML = total_price;
	}
	window.onload = calculate();
</script>

前面我们说过，需要在页面加载之后直接代用js函数。这里有两种调用方法，一种方法是在js后借助 window 的 onload 事件来调用函数；另一种方法是用 <body> 的 onload 事件。

方法一：

<script type="text/javascript">
	function calculate() {
		...
	}
	window.onload = calculate();
</script>

方法二：

1
2
3

<body  onload="calculate()">
	...
</body>

可以看到，这两种方法都可以实现调用函数。

总结

对于不能操作的html标签，都可以使用这种在页面加载好之后直接调用函数的方式。