我如何使用jquery合并选定的表格单元格 [英] how can I merge selected table cells using jquery
本文介绍了我如何使用jquery合并选定的表格单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用jquery合并选定的表格单元格？我有一个动态创建的表，我需要水平和垂直合并选定的表单元。
How can I merge selected table cells using jquery? I have a dynamically created table and I need to merge the selected table cells horizontally and vertically.
<table cellpadding="0" cellspacing="1" id="our_table" class="jan">
<tr id="dte">
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
推荐答案
到目前为止，据我所知，jquery没有功能用于操作表格。但是细胞可以通过编码手动合并。这是一个示例的想法。合并行也可以做同样的事情。
So far, from my knowledge, jquery has no function for manipulating tables. But cells can be merged by manually by coding. Here is a sample idea. Same thing can be done for merging rows.
<html>
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script>
$("document").ready(function () {
$("table").delegate("td" , "click", function(){
var colSp = prompt("Number of cells to span");
$(this).attr("colspan", colSp);
var ptr = $(this).parent().children();
for (var i = 1; i < colSp; i++) {
ptr[ptr.length - i].parentNode.removeChild(ptr[ptr.length - i]);
}
});
});
</script>
<style>
table td {
border: 1px solid black;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>r code here
这篇关于我如何使用jquery合并选定的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
