Question

Tôi cần thay đổi nền td thành màu xám và văn bản trong một td khác khi chuột của người dùng đi qua td được đề cập đầu tiên.

Tôi đã làm điều này cho đến nay:

<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'"> 

nhưng điều này chỉ thay đổi nền của td đầu tiên và không làm thay đổi văn bản trong td thứ hai

bất kỳ ý tưởng xin vui lòng?

Answer 1

Có xem xét này:

function highlightNext(element, color) { 
    var next = element; 
    do { // find next td node 
     next = next.nextSibling; 
    } 
    while (next && !('nodeName' in next && next.nodeName === 'TD')); 
    if (next) { 
     next.style.color = color; 
    } 
} 

function highlightBG(element, color) { 
    element.style.backgroundColor = color; 
} 

HTML:

<td onMouseOver="highlightBG(this, 'red');highlightNext(this, 'red')" 
    onMouseOut="highlightBG(this, 'white');highlightNext(this, 'black')" > 

DEMO

Lưu ý rằng việc thêm các xử lý sự kiện trong HTML được không được coi là thực hành tốt.

---

Depending on which browser you want to support (nó chắc chắn sẽ không hoạt động trong IE6), bạn thực sự nên xem xét phương pháp CSS sẽ hoạt động ngay cả khi JS bị tắt. Là ít hơn nhiều mã và nó sẽ được dễ dàng hơn để thêm hành vi này với nhiều yếu tố:

td:hover { 
    background-color: red;   
} 

td:hover + td { 
    color: red; 
} 

DEMO

Answer 2

Bạn nên cho rằng td khác một id và truy cập nó từ xử lý sự kiện onmouseover của bạn. Có lẽ bạn nên đặt mã onmouseover đó vào hàm riêng của nó và gọi nó từ onmouseover.