html的table标签用js做合并单元格操作

JavaScript014

html的table标签用js做合并单元格操作,第1张

为什么要用js呢？table本身就有合并单元格的功能，其实如果你用js也是给table添加对应的样式。具体代码如下：

<style>

table{ border-collapse:collapse}

table td{ border:2px solid #ddd width:50px height:25px text-align:center}

</style>

<table>

  <tr>

    <td colspan="2">123</td> //横向合并单元格

    <td>456</td>

    <td>789</td>

  </tr>

  <tr>

    <td rowspan="2">123</td> //竖向合并单元格

    <td>456</td>

    <td>456</td>

    <td>456</td>

  </tr>

  <tr>

    <td>123</td>

    <td>456</td>

    <td>456</td>

  </tr>

</table>

方法1

1、如果要合并单元格，请选中要合并的单元格。

2、单击“表格工具”中的“布局”选项卡（仅在将光标移到表格或选择表格中的单元格时，“表格工具”才会显示）

3、单击“合并”中的“合并单元格”以合并单元格。

方法2

1、如果要合并单元格，请选中要合并的单元格。

2、单击右键，选择“设置单元格格式”。

3、在窗口中，选择“对齐”在此可找到合并单元格的选项，勾选上即可。

温馨提示：word版本不同，显示页面会有差异，可根据实际版本找到相关的功能选项。

如下所示：

////在table的第二行的位置添加一行：

var tbl_elm = $("#dgList")

$('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1))

////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)

var tds = $("#dgList .TableHeader1").find('td')

tds[6].setAttribute("colSpan", "2")

还可以写成：tds[6].attr("rowSpan", 2)

这种格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove()

////juqery 读取table第N行第M列

$("#dgList").find("tr").eq(N).find("td").eq(M)

////合并一行中除个别单元格之外的所有单元格

$("#dgList tr:eq(0) td").each(function () {

if ($(this).text() != '租赁资源' &&$(this).text() != '用地规范') {

$(this).attr("rowspan", "2")

}

})

////指定行插入指定行后面

$('<tr><td>租赁资源</td><td>用地规范</td></tr>').insertAfter($("#dgList tr:eq(0)"))