js 操作table

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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 id="Head1" 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 () {
            var createTabl = function () {
                $("table tbody tr").remove();
                var j = 1;
                while (j < 20) {
                    var i = 1;
                    var tr = $("<tr></tr>");
                    tr.attr("y", j);
                    while (i < 20) {
                        var td = $("<td>" + j + "." + i + "</td>");
                        td.attr({ x: i, y: j });
                        td.click(function (event) { clickTd(event); });
                        tr.append(td);
                        i++;
                    }
                    $("table").append(tr);
                    j++;
                };
            };
            createTabl();

            var clickTd = function (event) {
                var obj = event.srcElement ? event.srcElement : event.target;
                $(obj).toggleClass("select");
                if (event.ctrlKey == 1) {
                    var rangetd = rangeTD();
                    $("table").find("td").each(function () {
                        $(this).removeClass("select");
                        var x = parseInt($(this).attr("x"));
                        var y = parseInt($(this).attr("y"));
                        if (x >= rangetd.x && x <= (rangetd.x + rangetd.xCount - 1) && y >= rangetd.y && y <= (rangetd.y + rangetd.yCount - 1)) {
                            $(this).addClass("select");
                        }
                    });
                }
            };

            $("#create").click(function () { createTabl() });

            var getMax = function (values) {
                var temp = 0;
                for (var i = 0; i < values.length; i++) {
                    if (i == 0) {
                        temp = values[i];
                    } else {
                        if (values[i] > temp) {
                            temp = values[i];
                        }
                    }
                }
                return temp;
            }
            var getMin = function (values) {
                var temp = 0;
                for (var i = 0; i < values.length; i++) {
                    if (i == 0) {
                        temp = values[i];
                    } else {
                        if (values[i] < temp) {
                            temp = values[i];
                        }
                    }
                }
                return temp;
            }

            $("#split").click(function () {
                //补齐合并的列
                $(".select[colspan]").each(function () {
                    var x = parseInt($(this).attr("x")) + 1;
                    var y = parseInt($(this).attr("y"));
                    var colspan = parseInt($(this).attr("colspan"));
                    var td = $(this);
                    while (colspan > 1) {
                        var newTd = getTd(x, y);
                        td.after(newTd);
                        td = newTd;
                        colspan--;
                        x++;
                    }
                });

                //补齐合并的行
                $(".select[rowspan]").each(function () {
                    var colspan = 1;
                    if ($(this).attr("colspan") != undefined) {
                        colspan = parseInt($(this).attr("colspan"));
                    }
                    var y = parseInt($(this).attr("y")) + 1;
                    var rowspan = parseInt($(this).attr("rowspan"));
                    while (rowspan > 1) {
                        var x = parseInt($(this).attr("x"));
                        var tr = $("table tr td[y=‘" + y + "‘]:first").parent();

                        var td;
                        tr.find("td").each(function (i, o) {
                            var nextX = parseInt($(this).attr("x"));
                            if (nextX < x) {
                                td = $(this);
                            }
                        });

                        var temp_colspan = colspan;

                        while (temp_colspan > 0) {
                            var newTd = getTd(x, y);
                            td.after(newTd);
                            td = newTd;
                            x++;
                            temp_colspan--;
                        }
                        rowspan--;
                        y++;
                    }
                });

                $(".select[rowspan]").removeAttr("rowspan");
                $(".select[colspan]").removeAttr("colspan");
                $(".select").removeClass("select");
            });

            var getTd = function (x, y) {
                var td = $("<td>" + y + "." + x + "</td>");
                td.attr({ x: x, y: y });
                td.click(function (event) { clickTd(event); });
                return td;
            }

            $("#merge").click(function () {
                if (canMeger()) {
                    var range_td = rangeTD();
                    if (range_td.xCount > 1) {
                        $(".select:first").attr("colspan", range_td.xCount);
                    }
                    if (range_td.yCount > 1) {
                        $(".select:first").attr("rowspan", range_td.yCount);
                    }
                    $(".select:gt(0)").remove();
                    $(".select").removeClass("select");
                } else {
                    alert("不能合并");
                }
            });

            var rangeTD = function () {
                var xValues = [];
                var yValues = [];
                $(".select").each(function () {
                    xValues.push(parseInt($(this).attr("x")));
                    yValues.push(parseInt($(this).attr("y")));
                });
                var maxX = getMax(xValues);
                var maxY = getMax(yValues);
                var minX = getMin(xValues);
                var minY = getMin(yValues);
                return { x: minX, y: minY, xCount: maxX - minX + 1, yCount: maxY - minY + 1 };
            };

            var canMeger = function () {
                var range_td = rangeTD();
                var selectCount = 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"));
                    }
                    selectCount += (rowspan * colspan);
                });
                return selectCount == (range_td.xCount * range_td.yCount);
            }

            $(".align").click(function () {
                var textAlign = $(this).attr("gh-align");
                $(".select").css("text-align", textAlign);
                $(".select").removeClass("select");
            });

            $("#insertRow").click(function () {
                var tr = $(".select").parent();
                tr.find(".select").removeClass("select");
                var trCopy = tr.clone(true);
                trCopy.find("td[rowspan]").removeAttr("rowspan");
                trCopy.find("td[colspan]").each(function () {
                    var x = parseInt($(this).attr("x"));
                    var y = parseInt($(this).attr("y"));
                    var colspan = parseInt($(this).attr("colspan"));
                    var td = $(this);
                    while (colspan > 1) {
                        td.after(getTd(x + 1, y));
                        td = td.next();
                        colspan--;
                    }
                });
                var trIndex = parseInt(tr.find("td:first").attr("y"));
                tr.prevAll().find("td[rowspan]").each(function () {
                    var rowspan = parseInt($(this).attr("rowspan"));
                    var tdY = parseInt($(this).attr("y")) + rowspan - 1;
                    if (tdY >= trIndex) {
                        $(this).attr("rowspan", rowspan + 1);
                    }
                });

                trCopy.find("td[colspan]").removeAttr("colspan");
                trCopy.find("td").empty();
                trCopy.find("td").append("&nbsp;");
                tr.before(trCopy);

                trCopy.nextAll().find("td").each(function () {
                    var y = parseInt($(this).attr("y")) + 1;
                    $(this).attr("y", y);
                });
            });

            $("#delRow").click(function () {
                var tr = $(".select").parent();
                //删除合并行的第一行
                tr.find("td[rowspan]").each(function () {
                    var tdCopy = $(this).clone(true);
                    var rowspan = parseInt($(this).attr("rowspan"));
                    if ((rowspan - 1) == 1) {
                        tdCopy.removeAttr("rowspan");
                    } else {
                        tdCopy.attr("rowspan", rowspan - 1);
                    }

                    tdCopy.attr("y", parseInt($(this).attr("y")) + 1);
                    var delX = parseInt($(this).attr("x"));
                    var td = null;
                    tr.next().find("td").each(function () {
                        var x = parseInt($(this).attr("x"));
                        if (x < delX) {
                            td = $(this);
                        }
                    });
                    if (td == null) {
                        tr.prepend(tdCopy);
                    } else {
                        td.after(tdCopy);
                    }

                });

                var trIndex = parseInt(tr.find("td:first").attr("y"));
                tr.prevAll().find("td[rowspan]").each(function () {
                    var rowspan = parseInt($(this).attr("rowspan"));
                    var tdY = parseInt($(this).attr("y")) + rowspan - 1;
                    if (tdY >= trIndex) {
                        if ((rowspan - 1) == 1) {
                            $(this).removeAttr("rowspan");
                        } else {
                            $(this).attr("rowspan", rowspan - 1);
                        }
                    }
                });

                tr.nextAll().find("td").each(function () {
                    var y = parseInt($(this).attr("y")) - 1;
                    $(this).attr("y", y);
                });
                tr.remove();
            });

            $("#insertCol").click(function () {
                var x = parseInt($(".select").attr("x"));
                $("table tbody tr").each(function () {
                    var td = $(this).find("td[x=‘" + x + "‘]");
                    if (td.size() > 0) {
                        var newTd = getTd(x, td.attr("y"));
                        td.before(newTd);
                        td = newTd;
                    } else {
                        $(this).find("td").each(function () {
                            var tdX = parseInt($(this).attr("x"));
                            if (tdX < x) {
                                td = $(this);
                            }
                        });
                        td.attr("colspan", parseInt(td.attr("colspan")) + 1);
                    }
                    td.nextAll().each(function () {
                        $(this).attr("x", parseInt($(this).attr("x")) + 1);
                    });
                });
            });
            $("#delCol").click(function () {
                var x = parseInt($(".select").attr("x"));
                $("table tbody tr").each(function () {
                    var td = $(this).find("td[x=‘" + x + "‘]");
                    if (td.size() > 0) {
                        td.nextAll().each(function () {
                            $(this).attr("x", parseInt($(this).attr("x")) - 1);
                        });
                        if (td.attr("colspan") == undefined) {
                            td.remove();
                        } else {
                            var colspan = parseInt(td.attr("colspan")) - 1;
                            if (colspan == 1) {
                                td.removeAttr("colspan");
                            } else {
                                td.attr("colspan", colspan);
                            }
                        }
                    } else {
                        $(this).find("td").each(function () {
                            var tdX = parseInt($(this).attr("x"));
                            if (tdX < x) {
                                td = $(this);
                            }
                        });
                        if (td.attr("colspan") != undefined) {
                            var colspan = parseInt(td.attr("colspan")) - 1;
                            if (colspan == 1) {
                                td.removeAttr("colspan");
                            } else {
                                td.attr("colspan", colspan);
                            }
                        }
                        td.nextAll().each(function () {
                            $(this).attr("x", parseInt($(this).attr("x")) - 1);
                        });
                    }
                });
            });

            $("table").on("mousedown", function () {
                if (window.event.button == 2) {
                    $(this).find(".select").removeClass("select");
                }
            });

$("table").on("contextmenu", function () {
return false;
});

            $("#test").on("click", function () {
                $("table td").each(function () {
                    $(this).empty();
                    $(this).append($(this).attr("y") + "." + $(this).attr("x"));
                });
            });
        });
    </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="插入行" id="insertRow" />
            <input type="button" value="删除行" id="delRow" />
            <input type="button" value="插入列" id="insertCol" />
            <input type="button" value="删除列" id="delCol" />
            <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" />
            <input type="button" value="验证" id="test" />
        </div>
        <div class="body">
            <table border="1" style="width: 100%;">
            </table>
        </div>
    </div>
    </form>
</body>
</html>
时间： 2024-12-16 16:51:19

js 操作table的相关文章

第十三篇 JS 操作table表格

JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然是真的了对吧,那么1=2呢,那就是假的,因为正常情况下,1不可能等于2,1就是1.那么我们在JS里写一个: var a=1; if(a=1){ alert('正确'); }else{ alert('错的'); } 给一个变量,来做判断,大家记住,if也有它的规则,先一个if,圆括号做判断,随后一个花

js操作table表格导出数据到excel方法

js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不错的东西. 导出的excel文件是xlsx,也可以改为xls打开.注意的是,要对每个table做个标记,加上div框架如代码: <div class="table-responsive table2excel" data-tableName="Test Table 1&qu

js操作table

function updatHost(obj) { var tdObj = $(obj).parents('tr').children('td'); var host_id = tdObj[0].innerHTML; var domitory_name = tdObj[1].innerHTML; var host_name = tdObj[2].innerHTML; var lived_number = tdObj[3].innerHTML; var total_number = tdObj[4

js实现动态操作table

 本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&

实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs" onclick="allcheck()" type="checkbox"/> </th> td中的代码 <td> <input name="boxs" type="checkbox"/

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

js创建table / 删除一行tr

代码: <!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head><body> </body> <script type="text/javascript"

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置             var newTd1 = newTr.insertCell();             newTd1.

JS 操作 AJAX

JS 操作 AJAX Table of Contents API 同步和异步 ajax / text server get post ajax / json server get post ajax / xml server get post 跨域 相关阅读 API onreadystatechange 指定当 readyState 属性改变时的事件处理句柄 readyState 返回当前请求的状态 responseBody 将回应信息正文以 unsigned byte 数组形式返回 respo