javascript - Jqueryを使用せずに最後のtdを見つける

Question

HTML テーブルのすべての行の最後の 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

あなたが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 4

最後の TD で何をしようとしていますか? 各 td の間にボーダーを入れたい場合は、border-left を使用してから、first-child を使用して削除してください。ブラウザとの互換性が高い、より良いアプローチがあるかもしれません。

Answer 5

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 6

純粋な 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;
}​

ワーキングフィドル。