javascript - 在不使用 Jquery 的情况下查找最后一个 td

Question

我需要找到 HTML 表中每一行的 Last td，并从该 td 中删除一个 css。我可以在不使用 Jquery 的情况下做到这一点吗？如何？

Answer 1

您可以为此使用 css3last-child属性。像这样写：

tr td:last-child{
 color:red;
}

但它不适用于 IE8 及以下版本。

Answer 2

使用 CSS

td:last-child: {
  //your style here
}

CSS3 选择器的文档在这里

或使用 JavaScript 遍历 DOM：

var mytable = document.getElementById('tableid');
var myrows = mytable.getElementsByTagName("tr");
var lastrow = myrows[myrows.length -1];
var mycells = lastrow.getElementsByTagName("td");
var lastcell = mycells[mycells.length -1];
// set CSS property here
lastcell.style.color = "red";

lastcell是你的最后一个td

使用 JavaScript 的工作示例

Answer 3

您是否尝试过使用 CSS3 选择器？例如

tr td:last-child
  {
    YOUR CODE HERE
  }

您还可以查看使用类来显示哪些 td 是最后一个。但这当然不是动态的。

我相信还有一个普通的 javascript 答案，但我不太擅长：P

http://www.w3.org/TR/selectors/

http://www.quirksmode.org/css/firstchild.html

Answer 4

假设您不是在寻找 css 类型的解决方案

rows=document.getElementsByTagName('tr')
for (var i=0; i<rows.length; i++){
    columns=rows[i].getElementsByTagName('td');
    mytd = columns[columns.length-1];
    classname = mytd.className;
    arr = classname.split(' ');
    mytd.className = arr.filter(function(e){return e!=CLASSTOREMOVE}).join(' ');
}

Answer 5

对于纯 JavaScript 解决方案：

function removeCssClass(tableId, cssClass) {
    var trs = null;
    var tr = null;
    var tds = null;
    var td = null;
    var classes = [];
    var i = 0;

    trs = document.getElementById(tableId).getElementsByTagName('tr');
    tds = trs[trs.length - 1].getElementsByTagName('td');
    td = tds[tds.length - 1];
    classes = td.className.split(' ');
    for (i = 0; i < classes.length; i += 1) {
        if (classes[i] === cssClass) {
            classes.pop(i);
        }
    }
    td.className = classes.join(' ');
    return false;
}​

工作小提琴。

Answer 6

你想用最后一个 TD 做什么？如果你想在每个 td 之间有一个边框，为什么不使用border-left，然后你可以使用 first-child 来删除它。可能有更好的方法与浏览器更兼容。