table 合并行和列
table合并行列，以及拆分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.select
{
background-color: gray;
}
.left
{
text-align: left;
}
.center
{
text-align: center;
}
.right
{
text-align: right;
}
table
{
border-collapse: collapse;
border: none;
}
td
{
border: solid #000 1px;
border-color: Black;
empty-cells: show;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tbody tr td").click(function () {
$(this).toggleClass("select");
}); var getColCount = function () {
var colspan = 0;
//获取选择的实际列数，包括合并的列
$(".select:first").parent().find(".select").each(function () {
if ($(this).attr("colspan") == undefined) {
colspan++;
} else {
colspan += parseInt($(this).attr("colspan"));
}
});
return colspan;
}
var getRowCount = function () {
var rowspan = 0;
//获取选择的实际行数，包括合并的行
var yIndex = $(".select:first").parent().index();
$("table tbody tr").has(".select").each(function () {
if ($(this).index() >= yIndex) {
var tr_first_checkd_td = $(this).find(".select:first");
if (tr_first_checkd_td.attr("rowspan") == undefined) {
rowspan++;
yIndex++;
} else {
rowspan += parseInt(tr_first_checkd_td.attr("rowspan"));
yIndex += parseInt(tr_first_checkd_td.attr("rowspan"));
}
}
});
return rowspan;
}
$("#merge").click(function () {
if (canMerge()) {
var colspan = getColCount();
var rowspan = getRowCount();
if (colspan != 1) {
$(".select:first").attr({ colspan: colspan });
}
if (rowspan != 1) {
$(".select:first").attr({ rowspan: rowspan });
}
$(".select:gt(0)").remove();
$(".select").removeClass("select");
} else {
alert("不能合并");
}
}); var canMerge1 = function () {
var rowCount = getRowCount();
var colCount = getColCount();
var totalCount = 0;
$(".select").each(function () {
var rowspan = 1;
var colspan = 1;
if ($(this).attr("rowspan") != undefined) {
rowspan = parseInt($(this).attr("rowspan"));
}
if ($(this).attr("colspan") != undefined) {
colspan = parseInt($(this).attr("colspan"));
}
totalCount += (rowspan * colspan);
}); return totalCount == rowCount * colCount;
}; var canMerge = function () {
//判断是否能合并，
//一，选择的td个数等于第一个和最后一个选择的td构成的方块的个数，
//二，所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
var first_X_Index = $(".select:first").index();
var first_Y_Index = $(".select:first").parent().index(); var last_X_Index = $(".select:last").index();
var last_Y_index = $(".select:last").parent().index();
var count = (last_X_Index - first_X_Index + 1) * (last_Y_index - first_Y_Index + 1);
var selectCount = $(".select").size();
//选择的td个数等于第一个和最后一个选择的td构成的方块的个数
var countEQ = count == selectCount;
//所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
var inRange = true;
for (var i = 0; i < $(".select").size(); i++) {
var x_index = $(".select").eq(i).index();
var y_index = $(".select").eq(i).parent().index();
if (x_index < first_X_Index || x_index > last_X_Index) {
inRange = false;
break;
} else if (y_index < first_Y_Index || y_index > last_Y_index) {
inRange = false;
break;
}
}
//return inRange && countEQ;
return true;
}; var getMin = function (colIndexs) {
var temp = 0;
for (var i = 0; i < colIndexs.length; i++) {
if (i == 0) {
temp = colIndexs[i];
} else {
if (colIndexs[i] < temp) {
temp = colIndexs[i];
}
}
}
} $("#split").click(function () {
//先补齐colspan,再补齐rowspan,最后删除选中的colspan和rowspan
$("table tr .select[colspan]").each(function () {
var colspan = parseInt($(this).attr("colspan"));
while (colspan > 1) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$(this).after(td);
colspan--;
}
}); $("table tr .select[rowspan]").each(function () {
var index = $(this).index() - 1;
var trIndex = $(this).parent().index() + 1;
var rowspan = parseInt($(this).attr("rowspan"));
if ($(this).attr("colspan") == undefined) {
while (rowspan > 1) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$("table tr").eq(trIndex).find("td").eq(index).after(td);
rowspan--;
trIndex++;
}
} else {
var colspan = parseInt($(this).attr("colspan"));
while (rowspan > 1) {
while (colspan > 0) {
var td = $("<td></td>");
td.click(function () {
$(this).toggleClass("select");
});
$("table tr").eq(trIndex).find("td").eq(index).after(td);
colspan--;
}
rowspan--;
trIndex++;
}
}
}); $(".select[rowspan]").removeAttr("rowspan");
$(".select[colspan]").removeAttr("colspan");
$(".select").removeClass("select");
}); $(".align").click(function () {
var textAlign = $(this).attr("gh-align");
$(".select").css("text-align", textAlign);
$(".select").removeClass("select");
}); $("#create").click(function () {
$("table tbody tr").remove();
var j = 1;
while (j < 20) {
var i = 1;
var tr = $("<tr></tr>");
while (i < 20) { var td = $("<td>" + j + "." + i + "</td>");
td.click(function (event) {
if (event.ctrlKey == 1) {
alert("ctrl");
}
$(this).toggleClass("select");
});
tr.append(td);
i++;
}
$("table").append(tr);
j++;
};
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="tool">
<input type="button" value="新建" id="create" />
<input type="button" value="合并" id="merge" />
<input type="button" value="拆分" id="split" />
<input type="button" value="左对齐" class="align" gh-align="left" />
<input type="button" value="居中" class="align" gh-align="center" />
<input type="button" value="右对齐" class="align" gh-align="right" />
</div>
<div class="body">
<table border="1" style="width: 100%;">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
<td>
10
</td>
<td>
11
</td>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
<td>
14
</td>
<td>
15
</td>
<td>
16
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
程序员的基础教程：菜鸟程序员
table 合并行和列的更多相关文章
- 【C#】Excel导出合并行和列并动态加载行与列
简单的Excel导出比较好做,只要设置表头,循环在表格中赋值添加数据即可,但是如果表头是不固定的,并且个数是不确定的,这就需要根据查询出数据的特点来添加导出了. 导出效果图: 如上图所示,商品的个数是 ...
- element-ui当中table组件的合并行和列的属性:span-method的用法
背景 最近基本上都是以Vue来构建项目,而UI框架也基本上都是使用的element-ui,所以里面组件用的也是越来越多,今天想记录的是非常非常小的一个属性的用法. Table组件 Table组件用了真 ...
- JavaScript遍历table的行和列
来源:http://blog.csdn.net/bobwu/article/details/7497412 <HTML> <head> <SCRIPT LANGUAGE= ...
- js实现table合并相同列单元格
/** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合 ...
- jquery获取table指定行和列的数据(当前选中行、列)
//不多说,直接上代码.$("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td ...
- DataSet导出到Excel，并生成文件（C#实现，可合并行和列）
using System; using System.IO; using System.Data; using System.Reflection; using System.Diagnostics; ...
- table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
随机推荐
- Mongodb简单介绍安装
具体详细内容,请查阅 Mongodb官方文档 一.简单介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. M ...
- Spring整合Quartz定时器
1.添加jar #此处省略spring核心jar包 <dependency> <groupId>org.quartz-scheduler</groupId> < ...
- 使用RawComparator加速Hadoop程序
使用RawComparator加速Hadoop程序 在前面两篇文章[1][2]中我们介绍了Hadoop序列化的相关知识,包括Writable接口与Writable对象以及如何编写定制的Writable ...
- javascript系列学习----Creating objects
在javascript语言里面,一切皆是对象,对象是它的灵魂,值得我们学习和领悟对象的概念和使用,下面我会引用实例来进行说明. 1)创建对象 方法一:js的对象方法构造 var cody = new ...
- 记一次socket_create()函数耗时异常记录
背景: 下午开发时突然整个页面耗时增加,空接口每次都需要2-3秒的耗时,一开始以为连开发环境数据库出现问题,最后断开数据库跑,发现还是很慢 最终逐步调试此页面耗时,定位到了socket_create( ...
- CentOS部署NetCore - 3. 部署站点
一. CentOS 安装FTP linux 安装 ftp第一步 使用如下命令#rpm -qa |grep vsftpd可以检测出是否安装了vsftpd软件, 如果没有安装,使用YUM命令进行安装. y ...
- 以太坊客户端Geth命令用法
命令用法 geth [选项] 命令 [命令选项] [参数…] 命令: account 管理账户attach 启动交互式JavaScript环境(连接到节点)bug 上报bug Issuesconsol ...
- mybatis实现继承映射
ORM 框架的优势在于能让我们利用面向对象的思维去操作数据库, hibernate 作为重量级的 ORM 框架对面向对象的支持很强大.作为半自动化的 mybatis ,对面向对象的支持也是很完备的.这 ...
- canvas之太阳系效果
星球 变量名 公转周期 光色 暗色 水星 Mercury 87.70 #a69697 #5c3e40 金星 Venus 224.701.70 #c4bbac #1f1315 地球 Earth 365. ...
- kafka常用命令（cdh5.10.0+kafka）
参考资料:http://kafka.apache.org/quickstart 进入kafka安装目录(CDH安装路径为:/opt/cloudera/parcels/KAFKA):进入bin目录: c ...