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 ...
随机推荐
- input type=number 禁止输入字符“e”的办法
输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...
- 如何将angular-ui-bootstrap的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- RK3288 usb 摄像头旋转
系统:Android 5.1 下面实现了摄像头 180 度旋转,旋转角度只需修改 orientation. diff --git a/hardware/rockchip/camera/CameraHa ...
- (转)用javamail发送带附件的邮件
本文转载自:http://redleaf.iteye.com/blog/78217 mail.java 代码 package mail; import java.util.* ; import jav ...
- 用活firewalld防火墙中的zone
原文地址:http://www.excelib.com/article/290/show firewalld中zone的含义学生前面已经给大家介绍过了,说白了一个zone就是一套规则集.可是什么时候该 ...
- USB驱动程序之USB设备驱动程序2鼠标用作键盘学习笔记
1.usbmouse.c (1)probe函数 在这个probe函数后判断是不是一个鼠标,先得到usb_host_interface结构体,除了端点0外,端点个数如果不是1,返回错误,表示不是自己能支 ...
- iconv 解决utf-8和gb2312编码转换问题
$content = iconv("utf-8","gb2312//IGNORE",$content); //utf-8转gbk $content = icon ...
- eclipse 使用lombok 精简java bean
前言: lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码.特别是相对于 POJO lombok 的官方网址 ...
- Disconf实践指南：使用篇
在上一篇文章Disconf实践指南:安装篇介绍了如何在本地搭建Disconf环境,下面我们介绍如何在项目中使用Disconf.由于某些功能特性对源码做了修改,所以在官方文档并没有提及. 环境基于mac ...
- django -- url 的 默认值
在urls.py里可以直接向函数传递默认值,看代码: urls.py from django.conf.urls import url from mytest import views urlpatt ...