jquery 生成表格，拆分，合并

矫情吗；* 2022-08-18 02:03 153阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 linux文件合并、去重、拆分

一、两个文件的交集、并集（前提条件：每个文件中不得有重复行） 1. 取出两个文件的并集（重复的行只保留一份） cat file1 file2 | sort | uniq >

悠悠/ 2023年10月18日 14:55/ 0 赞/ 66 阅读

相关使用pandas拆分合并excel文件

import pandas as pd import os df_source = pd.read_excel( "./pan

- 日理万妓/ 2023年02月26日 02:19/ 0 赞/ 145 阅读

相关 php数组合并和拆分,php数组合并与拆分实例分析

本文实例讲述了php数组合并与拆分的方法。分享给大家供大家参考。具体如下： $array1 = array("A","B","C","D"); $array2 = arra

╰+攻爆jí腚メ/ 2023年01月16日 09:41/ 0 赞/ 132 阅读

相关 numpy中的合并与拆分

> 一回生，两回熟。先来合并操作具体用到的：合并numpy.concatenate(【a,b】) 按矩阵列向合并np.vstack（【a,b】）按矩阵行向合并

约定不等于承诺〃/ 2022年10月31日 14:57/ 0 赞/ 161 阅读

相关 c语言实现文件拆分与合并,c++实现合并文件以及拆分实例代码

本文主要研究的是c++实现合并文件以及拆分的相关内容，分享了实现代码，具体如下。昨天看到一篇介绍TFS的文章，大意是为了处理海量图片，采用分布式架构，将小图片合并为大的文件

小灰灰/ 2022年10月15日 15:53/ 0 赞/ 178 阅读

相关 jquery合并表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/19

今天药忘吃喽~/ 2022年09月30日 06:17/ 0 赞/ 191 阅读

相关 jquery 生成表格，拆分，合并

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm

矫情吗；*/ 2022年08月18日 02:03/ 0 赞/ 154 阅读

相关 Oracle拆分合并分区方法

A拆分 alter table t split partition p1 values('2') into (partition p\_2 tablespace tbs

ゞ浴缸里的玫瑰/ 2022年08月07日 00:28/ 0 赞/ 246 阅读

相关文件拆分、合并

import java.io.; public class IOTest { public static void

深藏阁楼爱情的钟/ 2022年05月24日 07:55/ 0 赞/ 190 阅读

相关 Java 合并、拆分PPT幻灯片

序在日常使用PPT时，为了便于操作和管理文档，时常会遇到需要将PPT幻灯片进行合并或拆分的情况。本文将通过Java程序来演示如何进行上述操作。示例要点： ...

朱雀/ 2020年10月31日 04:08/ 0 赞/ 843 阅读