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 ...
随机推荐
- angular的指令独立作用域（以及$watch的使用）
在编写指令的时候,会有一个独立作用域的问题(scope),他默认的是 scope:false 不创建自己的作用域,直接使用的就是父级的作用域, 问题:容易出现全局的污染,是的指令的重复性使用回出现一些 ...
- 自己定义一个tab指令
定义一个tab切换的指令: 指令的文件结构: Js/directives/tab tab.html tab.js tab.html: <style> .my-li-style{ line- ...
- EMguCV搭建第一个程序
这篇博客旨在教学Emgucv3.0的安装与配置. 环境:vs2013+Emgucv3.0 Emgu Cv简介: Emgu CV 是.NET平台下对OpenCV图像处理库的封装.也就是opencv的.N ...
- xshell连接kali
连接出现错误,连接不上去,看到一篇文章可以使用,https://blog.csdn.net/yemaxq/article/details/78171241
- offset()和position()
网上百度都有的说明是 offset():获取匹配元素在当前视口的相对偏移. position():获取匹配元素相对父元素的偏移. 如果单纯写这两句话,这个博客毫无意义 这里我写下他俩的使用情况,希望对 ...
- li布局问题
问题示意,好多网站一般都有这种布局,如 问题主要原因,第一个li没有margin-left 其余有(这里只考虑一排的情况) 第一种解决方式: <!DOCTYPE html> <htm ...
- 安装Elastix-2.4版本
首先,下载Elastix地址:http://www.elastix.org,下载里面的2.4版本 第一步:选择安装,Enter 选择语言,默认就行 选择us,默认 选择全部 选择默认分区,点击OK 配 ...
- 3D角色渲染到2D界面上
using UnityEngine; using System.Collections; using System.Collections.Generic; using Carrie.Net; usi ...
- 20181122_C#中AOP初探_装饰器模式的AOP_Remoting实现AOP_Castle实现AOP
一. 什么是AOP: a) AOP是面向切面编程; 就像oop一样, 它也是一种编程思想; i. Oop思想→一切皆对象, 对象交互组成功能, 功能叠加组成模块, 模块叠加组 ...
- 一些Java相关的
都是从<Thinking in Java>英文第四版中摘抄的 _______________________________________________________________ ...