Найти последний тд без использования Jquery

Question

Мне нужно найти последний тд каждой строки в таблице HTML и удалить css из этого тд.Могу ли я сделать это без использования Jquery.Как?

Answer 1

Для этого вы можете использовать свойство css3 last-child.Напишите так:

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

Но это не работает в IE8 и ниже.

Answer 2

Использовать CSS

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

Документы по селекторам CSS3 здесь

или использовать обход DOM с помощью JavaScript:

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

Что вы пытаетесь сделать с последним ТД? Если вы хотите иметь границу между каждым тд, почему бы вам не использовать border-left, а затем вы можете использовать first-child, чтобы удалить его. Может быть лучше подход, более совместимый с браузерами.

Answer 4

Для решения на чистом 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 5

Предполагая, что вы не ищете решение типа 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 6

Вы пробовали использовать селекторы CSS3?Например,

tr td:last-child
  {
    YOUR CODE HERE
  }

Вы также можете посмотреть на использование классов, чтобы показать, какие тд являются последними.Но, конечно, это не динамично.

Я думаю, что есть и нормальный ответ на JavaScript, но я не очень хорош в этом:1012 *