Hướng dẫn change background color tr javascript - thay đổi màu nền tr javascript

Tôi cần thay đổi màu nền của một ô trong bảng bằng tập lệnh Java.

Trong quá trình tài liệu, tôi cần kiểu của tất cả các ô nên giống nhau (vì vậy bảng kiểu được sử dụng để thêm cái này.), Nhưng trên nút bấm, tôi cần thay đổi màu của ô đầu tiên.

Sau đây là mã mẫu

hỏi ngày 17 tháng 7 năm 2012 lúc 6:34Jul 17, 2012 at 6:34

Ashish Kasmaashish KasmaAshish Kasma

3.5547 Huy hiệu vàng25 Huy hiệu bạc29 Huy hiệu đồng7 gold badges25 silver badges29 bronze badges

Thử cái này:

function btnClick() {
    var x = document.getElementById("mytable").getElementsByTagName("td");
    x[0].innerHTML = "i want to change my cell color";
    x[0].style.backgroundColor = "yellow";            
}

Được đặt từ JS, backgroundColor tương đương với background-color trong phong cách của bạn.

Cũng lưu ý rằng bộ sưu tập .cells thuộc về một hàng bảng, không phải cho chính bảng. Để có được tất cả các ô từ tất cả các hàng, bạn có thể sử dụng getElementsByTagName().

Bản demo: http://jsbin.com/ekituv/edit#preview

Đã trả lời ngày 17 tháng 7 năm 2012 lúc 6:37Jul 17, 2012 at 6:37

0

Đặt ID cho ô và sau đó thay đổi nền của ô.

Đã trả lời ngày 10 tháng 1 năm 2014 lúc 10:10Jan 10, 2014 at 10:10

ThilinithiliniThilini

1011 Huy hiệu bạc2 Huy hiệu đồng1 silver badge2 bronze badges

document.getElementById('id1').bgColor = '#00FF00';

Có vẻ như hoạt động. Tôi không nghĩ .style.backgroundColor có.

Kevin Kopf

12.8K14 Huy hiệu vàng51 Huy hiệu bạc61 Huy hiệu Đồng14 gold badges51 silver badges61 bronze badges

Đã trả lời ngày 21 tháng 3 năm 2016 lúc 1:07Mar 21, 2016 at 1:07

Chào mọi người,

Tôi có một chức năng trên KeyUP lọc nội dung C# GridView trên máy khách - nhưng điều tôi muốn là thay đổi màu nền của từng phần tử TR để thậm chí các hàng cũng có một màu và các hàng lẻ có màu khác.

Phần chức năng bộ lọc trên cùng hoạt động tốt và vòng lặp của tôi thông qua div hoạt động tốt - nhưng nó đã đặt nền, nó không làm gì trong trình duyệt :-(

Vậy làm thế nào để thay đổi màu nền của thẻ TR?

Bây giờ tôi đã thử rất nhiều và googled rất nhiều cho đến bây giờ - vì vậy đó là lý do tại sao tôi vui lòng nhờ giúp đỡ trên trang web này.

Vì vậy, bất kỳ sự giúp đỡ được đánh giá cao.

Cảm ơn trước, Michael
Michael

Những gì tôi đã thử:

$('#txtSearchTemplateName').on('keyup', function () {
    if ($('#txtSearchTemplateName').val().length > 2) {
        $("tr[data-filter]").hide();
        $("tr[data-filter*='" + $('#txtSearchTemplateName').val().toLowerCase() + "']").show();
    }
    else 
        $("tr[data-filter]").show();

    var vDiv = document.getElementById("myDIV");
    for (i = 0; i <= vDiv.childElementCount - 1; i++) {
        if (vDiv.children[i].tagName === "TABLE") {
            var vTbl = vDiv.children[i];
            for (j = 0; j <= vTbl.childElementCount - 1; j++) {
                if (vTbl.children[j].tagName === "TBODY") {
                    var vBody = vTbl.children[j];
                    var vTRList = vBody.getElementsByTagName("TR");
                    for (k = 0; k <= vTRList.length - 1; k++) {
                        var element = vTRList[k];
                        var style = element.style;
                        style.backgroundColor = "#ff0000";
                        element.style = style;
                    }
                }
            }
        }
    }
});

---

Sau khi mã của bạn chạy, hãy sử dụng trình duyệt của trình duyệt để chọn bất kỳ phần nào của hàng và xem nơi nó lấy màu nền của nó. Đặt cược của tôi là từ (các) phần tử TD trong TR. Nếu bạn muốn trở nên khó chịu về nó, bạn có thể thoát khỏi việc đặt màu nền thành

function btnClick() {
    var x = document.getElementById("mytable").getElementsByTagName("td");
    x[0].innerHTML = "i want to change my cell color";
    x[0].style.backgroundColor = "yellow";            
}

0 nhưng có lẽ nó đáng để thiết lập TD (hoặc bất kỳ yếu tố nào trong TD đều cung cấp màu nền) đúng.

Nội dung này, cùng với bất kỳ mã nguồn và tệp liên quan nào, được cấp phép theo giấy phép mở của Dự án Mã (CPOL)

Codeproject, 20 Bay Street, Tầng 11 Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900

Bạn có thể thay đổi màu sắc trong JavaScript không?

Được sử dụng để đặt màu nền của bảng?