js中动态添加行时如何让某一列合并添加的该行

[学无止境啊~]

想要动态添加一行时，后面两列把添加的这行合并，如何写？望大神帮忙~~
想要的效果图：

下面代码实现的效果：

<script type="text/javascript">
//行
var trAddHtml = '<tr name="trItems" class="content"><td><input class="easyui-datetimebox" name="first" data-options="required:true" style="width:80px;height:24px;" ></td><td><input class="easyui-datetimebox" name="second" data-options="required:true" style="width:80px;height:24px;" ></td><td rowspan="3"><input class="aValue required number" style="width: 40px;height:24px;" value=""></td><td rowspan="3"><input class="bValue required number" style="width: 80px;height:24px;" value=""></td></tr>';

//动态添加行
function addRow() {
var html = trAddHtml;
$("#ItemsTable tbody:last").append(html);
//此处应该如何编辑行，能把后两列动态合并行？？？？
}
</style>
//显示的列标题
<div>
<table border="0" cellpadding="0" cellspacing="0" class="form2" id="ItemsTable">
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

[一支糖包仔]

点+号的时候，获取到当前table里面的行数量： var rowCount=$('table>tr').length; 然后修改第一行指定列的属性，例如第三列（或者你定义一个class） $('table>tr:eq(2)').attr('rowspan',rowCount); 以上没进行测试，但思路差不多就是这样。

[囧]

<script type="text/javascript">
//行
var trAddHtml = '<tr name="trItems" class="content"><td><input class="easyui-datetimebox" name="first"  data-options="required:true" style="width:80px;height:24px;" ></td><td><input class="easyui-datetimebox" name="second"  data-options="required:true" style="width:80px;height:24px;" ></td>_tdCell_</tr>';
var tdCell = '<td class="td-row-span"><input class="aValue required number" style="width: 40px;height:24px;"  value=""></td><td class="td-row-span"><input class="bValue required number" style="width: 80px;height:24px;"  value=""></td>';

//动态添加行
function addRow() {
	var html = trAddHtml, tbody = $("#ItemsTable tbody:last");
	var len = tbody.find("tr").length;
	if(len < 1){
		html = html.replace('_tdCell_', tdCell);
	}else{
		html = html.replace('_tdCell_', '');
		$(".td-row-span", tbody).attr("rowspan", len + 1);
	}
	tbody.append(html);
	//此处应该如何编辑行，能把后两列动态合并行？？？？
}
</script>
//显示的列标题
<div>
	<table border="0" cellpadding="0" cellspacing="0" class="form2" id="ItemsTable">
		<thead>
			<tr>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
				<td>第四列</td>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

[学无止境啊~]

引用 2 楼 囧 的回复:

<script type="text/javascript">
//行
var trAddHtml = '<tr name="trItems" class="content"><td><input class="easyui-datetimebox" name="first"  data-options="required:true" style="width:80px;height:24px;" ></td><td><input class="easyui-datetimebox" name="second"  data-options="required:true" style="width:80px;height:24px;" ></td>_tdCell_</tr>';
var tdCell = '<td class="td-row-span"><input class="aValue required number" style="width: 40px;height:24px;"  value=""></td><td class="td-row-span"><input class="bValue required number" style="width: 80px;height:24px;"  value=""></td>';

//动态添加行
function addRow() {
	var html = trAddHtml, tbody = $("#ItemsTable tbody:last");
	var len = tbody.find("tr").length;
	if(len < 1){
		html = html.replace('_tdCell_', tdCell);
	}else{
		html = html.replace('_tdCell_', '');
		$(".td-row-span", tbody).attr("rowspan", len + 1);
	}
	tbody.append(html);
	//此处应该如何编辑行，能把后两列动态合并行？？？？
}
</script>
//显示的列标题
<div>
	<table border="0" cellpadding="0" cellspacing="0" class="form2" id="ItemsTable">
		<thead>
			<tr>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
				<td>第四列</td>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

感谢大神~