jquery 生成表格，拆分，合并
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>操作表格</title>
</head>
<body>
<div style="padding-bottom:10px;">
时间：<input id="startDate" type="text" value="2015-11-01" /> 至 <input id="endDate" type="text" value="2015-11-20" />
<button id="btnDesigner">设计</button>
<button id="btnMerge">合并</button>
<button id="btnSplit">拆分</button>
</div>
<div>
<div style="margin-top:20px;">
<table class="gridtable">
<thead>
<tr>
<th style="width:45px;">单选</th>
<th style="width:60px;">日期</th>
<th style="width:60px;">星期</th>
<th style="width:100px;">时间</th>
<th style="width:200px;">活动内容</th>
<th style="width:70px;">主讲人姓名</th>
<th style="width:80px;">职称/职务</th>
<th style="width:130px;">主讲人单位</th>
<th style="width:80px;">地点</th>
<th style="width:180px;">备注</th>
</tr>
</thead>
<tbody id="gridBody"></tbody>
</table>
</div>
<script>
$(function () {
DesignerFun();
MergeFun();
SplitFun();
});
function DesignerFun() {
$("#btnDesigner").click(function () {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
GenerateTable(startDate, endDate);
});
}
function MergeFun() {
$("#btnMerge").click(function () {
var radId = getRadioSelectId();
if (radId >= 0) {
var classLength = $("#gridBody .trc" + radId).length;
if (classLength > 1) {
$("#tr" + radId + " td").each(function (i, item) {
if ($(item).attr("rowspan")) {
$(item).attr("rowspan", classLength - 1);
}
});
$("#gridBody .trc" + radId + ":last").remove();
} else {
alert("请至少保留一行");
}
} else {
alert("请先选择需要合并的行");
}
});
}
function SplitFun() {
$("#btnSplit").click(function () {
var radId = getRadioSelectId();
if (radId >= 0) {
var splitTr = getSpliTr(radId);
var classLength = $("#gridBody .trc" + radId).length;
$("#tr" + radId + " td").each(function (i, item) {
if ($(item).attr("rowspan")) {
$(item).attr("rowspan", classLength + 1);
}
});
$("#gridBody .trc" + radId + ":last").after(splitTr);
} else {
alert("请先选择需要拆分的行");
}
});
}
function GenerateTable(startDate, endDate) {
//getNextday(startDate);
var temp;
var len = getDateDiff(startDate, endDate);
var table = [];
for (var i = 0; i <= len; i++) {
temp = startDate;
var week = getWeek(startDate);
var date = getDate(startDate);
table.push(getTr(temp,date, week, i));
startDate = getNextday(startDate);
}
var html = table.join("");
$("#gridBody").html("").append(html);
}
function getRadioSelectId() {
var temp = -1;
var rads = document.getElementsByName("rad");
for (var i = 0; i < rads.length; i++) {
if (rads[i].checked)
temp = rads[i].value;
}
return temp;
}
//时间，转换后的时间，星期，循环i下标
function getTr(temp,date, week, i) {
var tr = "<tr id="tr" + i + "" class="trc" + i + ""><td rowspan="2"><input name="rad" value="" + i + "" type="radio" id="radio" + i + "" /></td><td rowspan="2" data-date="" + temp + "">" + date + "</td><td rowspan="2">" + week + "</td><td><input type="text" class="tdc3" value="上午" /></td><td><input type="text" class="tdc4" /></td>";
tr += "<td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td><td rowspan="2"><input type="text" class="tdc6" /></td>";
tr += "<td rowspan="2"><input type="text" class="tdc7" /></td><td rowspan="2"><textarea rows="3" class="tdc8"></textarea></td></tr>";
tr += "<tr class="trc" + i + ""><td><input type="text" class="tdc3" value="下午" /></td><td><input type="text" class="tdc4" /></td><td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td></tr>";
return tr;
}
//获取拆分tr
function getSpliTr(i) {
var tr = "<tr class="trc" + i + ""><td><input type="text" class="tdc3" value="" /></td><td><input type="text" class="tdc4" /></td><td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td></tr>";
return tr;
}
//获取时间差
function getDateDiff(date1, date2) {
var arr1 = date1.split("-");
var arr2 = date2.split("-");
var d1 = new Date(arr1[0], arr1[1], arr1[2]);
var d2 = new Date(arr2[0], arr2[1], arr2[2]);
return (d2.getTime() - d1.getTime()) / (1000 * 3600 * 24);
}
//获取传入时间的下一天
function getNextday(startDate) {
var today = startDate;
var t = new Date(Date.parse(today.replace(/-/g, "/")));
var tm = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1);
var m = "0" + (tm.getMonth() + 1);
var d = "0" + tm.getDate()
return tm.getFullYear() + "-" + m.substr(m.length - 2) + "-" + d.substr(d.length - 2);
}
//获取表格日期
function getDate(value) {
return value.substring(5, value.length).replace("-", "月") + "日";
}
function getWeek(value) {
var w = "";
var d = new Date(value).getDay();
switch (d) {
case 0:
w = "星期日";
break;
case 1:
w = "星期一";
break;
case 2:
w = "星期二";
break;
case 3:
w = "星期三";
break;
case 4:
w = "星期四";
break;
case 5:
w = "星期五";
break;
case 6:
w = "星期六";
break;
}
return w;
}
</script>
</body>
</html>
<html>
<head>
<title>操作表格</title>
<style>
html, body {height: 100%;}
.gridtable {font-family: verdana,arial,sans-serif;font-size: 11px;color: #333333; border-width: 1px;border-color: #666666;border-collapse: collapse;}
.gridtable th {border-width: 1px;padding: 5px;border-style: solid;border-color: #666666;background-color: #dedede;text-align: center;}
.gridtable tr {height: 32px;}
.gridtable td {border-width: 1px;padding: 4px;border-style: solid;border-color: #666666;background-color: #ffffff; text-align: center;}
.gridtable input {
text-align: center;
height: 28px;
border: 0px;
}
.tdc3 {width: 100px}
.tdc4 {width: 190px;}
.tdc5 {width: 80px;}
.tdc6 {width: 120px;}
.tdc7 { width: 75px;}
.tdc8 {width: 175px;border: 0px;}
</style>
<script src="jquery.min.js"></script></head>
<body>
<div style="padding-bottom:10px;">
时间：<input id="startDate" type="text" value="2015-11-01" /> 至 <input id="endDate" type="text" value="2015-11-20" />
<button id="btnDesigner">设计</button>
<button id="btnMerge">合并</button>
<button id="btnSplit">拆分</button>
</div>
<div>
<div style="margin-top:20px;">
<table class="gridtable">
<thead>
<tr>
<th style="width:45px;">单选</th>
<th style="width:60px;">日期</th>
<th style="width:60px;">星期</th>
<th style="width:100px;">时间</th>
<th style="width:200px;">活动内容</th>
<th style="width:70px;">主讲人姓名</th>
<th style="width:80px;">职称/职务</th>
<th style="width:130px;">主讲人单位</th>
<th style="width:80px;">地点</th>
<th style="width:180px;">备注</th>
</tr>
</thead>
<tbody id="gridBody"></tbody>
</table>
</div>
<script>
$(function () {
DesignerFun();
MergeFun();
SplitFun();
});
function DesignerFun() {
$("#btnDesigner").click(function () {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
GenerateTable(startDate, endDate);
});
}
function MergeFun() {
$("#btnMerge").click(function () {
var radId = getRadioSelectId();
if (radId >= 0) {
var classLength = $("#gridBody .trc" + radId).length;
if (classLength > 1) {
$("#tr" + radId + " td").each(function (i, item) {
if ($(item).attr("rowspan")) {
$(item).attr("rowspan", classLength - 1);
}
});
$("#gridBody .trc" + radId + ":last").remove();
} else {
alert("请至少保留一行");
}
} else {
alert("请先选择需要合并的行");
}
});
}
function SplitFun() {
$("#btnSplit").click(function () {
var radId = getRadioSelectId();
if (radId >= 0) {
var splitTr = getSpliTr(radId);
var classLength = $("#gridBody .trc" + radId).length;
$("#tr" + radId + " td").each(function (i, item) {
if ($(item).attr("rowspan")) {
$(item).attr("rowspan", classLength + 1);
}
});
$("#gridBody .trc" + radId + ":last").after(splitTr);
} else {
alert("请先选择需要拆分的行");
}
});
}
function GenerateTable(startDate, endDate) {
//getNextday(startDate);
var temp;
var len = getDateDiff(startDate, endDate);
var table = [];
for (var i = 0; i <= len; i++) {
temp = startDate;
var week = getWeek(startDate);
var date = getDate(startDate);
table.push(getTr(temp,date, week, i));
startDate = getNextday(startDate);
}
var html = table.join("");
$("#gridBody").html("").append(html);
}
function getRadioSelectId() {
var temp = -1;
var rads = document.getElementsByName("rad");
for (var i = 0; i < rads.length; i++) {
if (rads[i].checked)
temp = rads[i].value;
}
return temp;
}
//时间，转换后的时间，星期，循环i下标
function getTr(temp,date, week, i) {
var tr = "<tr id="tr" + i + "" class="trc" + i + ""><td rowspan="2"><input name="rad" value="" + i + "" type="radio" id="radio" + i + "" /></td><td rowspan="2" data-date="" + temp + "">" + date + "</td><td rowspan="2">" + week + "</td><td><input type="text" class="tdc3" value="上午" /></td><td><input type="text" class="tdc4" /></td>";
tr += "<td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td><td rowspan="2"><input type="text" class="tdc6" /></td>";
tr += "<td rowspan="2"><input type="text" class="tdc7" /></td><td rowspan="2"><textarea rows="3" class="tdc8"></textarea></td></tr>";
tr += "<tr class="trc" + i + ""><td><input type="text" class="tdc3" value="下午" /></td><td><input type="text" class="tdc4" /></td><td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td></tr>";
return tr;
}
//获取拆分tr
function getSpliTr(i) {
var tr = "<tr class="trc" + i + ""><td><input type="text" class="tdc3" value="" /></td><td><input type="text" class="tdc4" /></td><td><input type="text" class="tdc5" /></td><td><input type="text" class="tdc5" /></td></tr>";
return tr;
}
//获取时间差
function getDateDiff(date1, date2) {
var arr1 = date1.split("-");
var arr2 = date2.split("-");
var d1 = new Date(arr1[0], arr1[1], arr1[2]);
var d2 = new Date(arr2[0], arr2[1], arr2[2]);
return (d2.getTime() - d1.getTime()) / (1000 * 3600 * 24);
}
//获取传入时间的下一天
function getNextday(startDate) {
var today = startDate;
var t = new Date(Date.parse(today.replace(/-/g, "/")));
var tm = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1);
var m = "0" + (tm.getMonth() + 1);
var d = "0" + tm.getDate()
return tm.getFullYear() + "-" + m.substr(m.length - 2) + "-" + d.substr(d.length - 2);
}
//获取表格日期
function getDate(value) {
return value.substring(5, value.length).replace("-", "月") + "日";
}
function getWeek(value) {
var w = "";
var d = new Date(value).getDay();
switch (d) {
case 0:
w = "星期日";
break;
case 1:
w = "星期一";
break;
case 2:
w = "星期二";
break;
case 3:
w = "星期三";
break;
case 4:
w = "星期四";
break;
case 5:
w = "星期五";
break;
case 6:
w = "星期六";
break;
}
return w;
}
</script>
</body>
</html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： JS二维数组的定义及赋值
- 下一篇： <jquery>jquery动态合并表格
