• 表格行列的删除


      继续表格的有关操作,这篇说说表格行与列的删除。

      所有这些操作恼人的地方其实都是在融合的单元格上

      a.行的移除

      首先计算整个表格的总列数。

    总列数
    var $row = $(sender).parent().parent();
    var $nextRow = $row.next();

    var $firstRow = $row.parent().children("tr:first");
    var colCount = $firstRow.children("td").size();
    $firstRow.children(
    "td[colspan]").each(function() {
    colCount
    = colCount + ($(this).attr("colspan") - 1);
    });
    //表格总列数

    然后是当前这一行被行融合所占去的列数,

    融合数
    var count = colCount - $row.children().size();
    $row.children(
    "td[colspan]").each(function() {
    count
    = count - ($(this).attr("colspan") - 1);
    });
    //被行融合被占用的单元格数目

    如果当前行没有被行融合占掉的就好说了,如果有的话要把父节点的rowspan值减1,先贴代码吧。

    父层节点的rowspan值减1
    if (count > 0) {//当前行有位置被行合并单元格占用的,要往上溯把相应的rowspan值减1
    var $preRow = $row.prev();
    var spanClsName = "";
    while ($preRow) {
    var spanColumn = $preRow.children("td[rowspan]").get();
    for (var i = 0; i < spanColumn.length; i++) {
    var $this = $(spanColumn[i]);
    if (spanClsName.length > 0 && spanClsName <= $this.attr("class"))
    break;

    var spanCount = $this.attr("rowspan");
    spanCount
    = spanCount - 1;
    if (spanCount == 1)
    $
    this.removeAttr("rowspan");
    else
    $
    this.attr("rowspan", spanCount);
    var colSpan = $this.attr("colspan");
    if (colSpan)
    count
    = count - colSpan;
    else
    count
    = count - 1;
    if (count == 0)
    break;
    }

    if (count == 0)
    break;
    if (spanColumn.length > 0)
    spanClsName
    = $(spanColumn[0]).attr("class");
    $preRow
    = $preRow.prev();
    }
    }

    最终把count归零就表示把所有父节点的rowspan值都减1了。

      里面那个循环,                   

      var spanColumn = $preRow.children("td[rowspan]").get();
          for (var i = 0; i < spanColumn.length; i++) {

      }

    这里为什么不用jquery的each,而用js原始形态的for,是为了避免把兄弟节点的rowspan值也减1。

    接下来,考虑当前行有行融合单元格的,把rowspan值减1,加入到下一行中,这里也用了循环,而且是递减的,是为了把节点以正确的顺序加入到下行的行首

    当前行rowspan的处理
    var spanRows = $row.children("td[rowspan]").get();//当前行有行合并单元格的,要把rowspan值减1,并加入到下一行
    for(var i = spanRows.length - 1;i >= 0;i--){
    var $this = $(spanRows[i]);
    var spanCount = $this.attr("rowspan");
    spanCount
    = spanCount - 1;
    if (spanCount == 1)
    $
    this.removeAttr("rowspan");
    else
    $
    this.attr("rowspan", spanCount);
    $
    this.insertBefore($nextRow.children("td:first"));
    };

    最后把当前行移除

                $row.remove(); //当前行移除

      b.列的移除

      列的移除思路也跟行移除一样,先找父代的colspan的节点;当前列如果是融合的,colspan值减1,加入到下一列(注:这里加入到下一列只是把class改为下一列的class而已)。

    取得相关元素,并得到操作符所在行的行索引
    var $column = $(sender).parent();
    var className = $column.attr("class");
    var nextClass = $column.next().attr("class");
    var $row = $column.parent();
    var $table = $row.parent();

    var opIndex = $table.children("tr").index($row);
    var ri = 0;
    var $chCol, $pchCol;

    取操作符所在行的行索引,是为了寻当前列的单元格时有一个终止条件。

    从第一行开始找当前列的单元格
    while (ri < opIndex) {
    var $cRow = $table.children("tr").eq(ri);
    $chCol
    = $cRow.children("td." + className);

    if ($chCol.size() == 0) {
    //......当前行当前列,没有相应单元格,往左找它的融合单元格

    }
    else {
    //......当前行当前列,有单元格存在
    }

    }

    当前列没有单元格时,用操作符列的class来回溯找融合单元格

    当前列没单元格时的处理
    var $preColumn = $column.prev();
    var preClassName = $preColumn.attr("class");
    $pchCol
    = $cRow.children("td." + preClassName);
    while ($pchCol.size() == 0) {//这个位置上没有单元格位置,找它的融合单元格
    $preColumn = $preColumn.prev();
    preClassName
    = $preColumn.attr("class");
    $pchCol
    = $cRow.children("td." + preClassName);
    }
    var spanCount = $pchCol.attr("colspan"); //相应的colspan值减1
    spanCount--;
    if (spanCount == 1)
    $pchCol.removeAttr(
    "colspan");
    else
    $pchCol.attr(
    "colspan", spanCount);

    var rSp = $pchCol.attr("rowspan"); //跳过行融合的单元格
    if (rSp && rSp > 1)
    ri
    += rSp;
    else
    ri
    ++;
    当前列存在单元格时的处理
    var $this = $chCol.eq(0);
    var spanCount = $this.attr("colspan"); //当前单元格是融合的
    if (spanCount && spanCount > 1) {
    spanCount
    --;

    if (spanCount > 1)
    $
    this.attr("colspan", spanCount);
    else
    $
    this.removeAttr("colspan");

    $
    this.attr("class", nextClass); //colspan值减1后加到后面一列去
    }

    var rSp = $this.attr("rowspan");
    if (rSp && rSp > 1)
    ri
    += rSp;
    else
    ri
    ++;

    最后把这一列移除

                $("td." + className).each(function() {
                    $(this).remove();
                });

  • 相关阅读:
    一起学习Avalonia(八)
    国产下的netcore
    一起学习Avalonia(七)
    一起学习Avalonia(六)
    一起学习Avalonia补充(deepin下的使用开发t调试)
    一起学习Avalonia(五)
    一起学习Avalonia补充(Linux下的使用开发)
    一起学习Avalonia(四)
    一起学习Avalonia(三)
    html页面边框的简单设置方法
  • 原文地址:https://www.cnblogs.com/lichdr/p/1872748.html
Copyright © 2020-2023  润新知