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=" 100%;">
            </table>
        </div>
    </div>
    </form>
</body>
</html>

 程序员的基础教程：菜鸟程序员

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/guohu/p/4565027.html