-1

我想通过 JavaScript 在表格上添加一个新列。

现在，我想在它的添加索引位置显示空列，这个添加发生的位置。当在其索引位置添加列时，它也必须隐藏。

方法代码：

function addColumn(tblId, colIndexVal)
  {

//New Header 

    var tblHeadObj = document.getElementById(tblId).tHead;

for (var h=0; h<tblHeadObj.rows.length; h++) {
      var newTH = document.createElement('th');

   tblHeadObj.rows[h].insertBefore(newTH, tblHeadObj.rows[h].children[colIndexVal] );

       newTH.innerHTML = "New Col Header";
    }

//New Column cells

    var tblBodyObj = document.getElementById(tblId).tBodies[0];
    for (var i=0; i<tblBodyObj.rows.length; i++) {
      var newCell = tblBodyObj.rows[i].insertCell(colIndexVal);
      newCell.innerHTML = 'new cells'
  )
    }


  }

谁能建议如何做到这一点。谢谢

4

3 回答 3

0

jsFiddle 上的示例

td您可以通过在每一行中插入一个元素来在表格中添加一个新列。

function addCol()
{
    $("table thead tr").each(function() {
        var td = $("<th>");
        var index = $(this).find("th").length;
        td.html("Col index " + index);
        td.appendTo(this);
    });

    $("table tbody tr").each(function() {
        var td = $("<td>");
        td.appendTo(this);
    });
}

addCol();
addCol();
于 2013-06-03T14:28:59.890 回答
0

您基本上想使用 eq 获取索引，然后在新创建的索引之前插入新行（可能还有标题）。

像这样的东西：

var table = $("table") // select your table,
    index = 3, // index where to insert
    newRow = $("<td></td>");
table.find("th").eq(index).before(newRow)

完整示例（也添加标头值）：http: //jsfiddle.net/cTNqX/

于 2013-06-03T15:17:35.783 回答
0

鉴于您的问题缺乏清晰性或我对您的问题的理解，这是我对我认为您想要的内容的纯 JavaScript最佳猜测。它还具有几个简单的（非完整性检查）方法，以允许更轻松的遍历/检索（再次：没有完整性检查，因此要小心或改进它们）：

/* trying to reduce the necessity of
   'this.parentNode.parentNode' etc, to
   remove the need to know the exact structure */
Object.prototype.closest = function (elType) {
    var parent = this.parentNode;
    return parent.tagName.toLowerCase() == elType.toLowerCase() ? parent : parent.closest(elType);
};

/* a simple non-sanity-checked means to find,
   and filter, the sibling elements of a node */
Object.prototype.siblings = function (filter) {
    var parent = this.parentNode,
        s = parent.children,
        rs = [],
        c, t;
    for (var i = 0, len = s.length; i < len; i++) {
        c = s[i].className;
        t = s[i].tagName.toLowerCase();
        if (c.indexOf(filter) > -1 || t == filter) {
            rs.push(s[i]);
        }
    }
    return filter ? rs : s;
}

// no attempt whatsoever is being made to make this IE compatible
var table = document.querySelector('table');

function addColumn(e) {
    var self = e.target,
        cell = self.parentNode,
        rows = self.closest('tr').siblings('tr'),
        index = cell.cellIndex,
        newEl;
    for (var i = 0, len = rows.length; i < len; i++) {
        rows[i].insertCell(index + 1);
        newEl = rows[i].children[index + 1];
        // uncomment below if you want to hide:
        // newEl.style.display = 'none';
    }
}

table.addEventListener('click', addColumn, false);

JS 小提琴演示。

于 2013-06-03T15:50:14.467 回答