Question

我正在尝试使用Javascript更改动态生成的值列表的单击行的颜色。问题是，所有行都有相同的“类”属性（tr.odd或tr.even，“偶数”或“奇数”，以使行之间的某些css区别...）我不想使用标识。因此，要更改单击链接的颜色，我想获得（THIS）tr元素的任何属性，并更新（添加到）一个像“clicked”的值...例如我每次都在title-attribute中一个不同的serialNr，我可以添加“clicked”作为标记，它看起来像ex。 “LG 1234点击”。而且我没有得到它..我现在得到所有的tr元素采用这个标记，所以在我点击一行之后，每次在另一行的“mouseleave”上，虽然它没有被点击，但它会改变它的颜色为蓝色，因为它已被点击，我认为这个问题是由于标签“clicked”被添加到所有tr元素的“title”属性而不是特别是我需要/我点击的那个。

这是脚本代码：

$(document).on("mouseenter", ".filter-table tbody tr", function() {
        $(this).css("background", "#21374C");
        $(this).css("color", "#DFDFDF");
    }); 

$(document).on("click", ".filter-table tbody tr", function() {
        var element = document.getElementsByTagName("tr")[0].setAttribute("title", "clicked");
        $(this).css("color", "blue");
        $(this).css("background", "#DFDFDF");
        console.log("attribute title is: " + element.getAttribute("title"));
    });

$(document).on("mouseleave", ".filter-table tbody tr.odd", function() {
        var element = document.getElementsByTagName("tr")[0];
         if (element.getAttribute("title") == "clicked") {
            $(this).css("color", "blue");
            $(this).css("background", "#DFDFDF");   
        }
        else { 
            $(this).css("background", "#DFDFDF");
            $(this).css("color", "#222222");
        }

    });

    $(document).on("mouseleave", ".filter-table tbody tr.even", function() {
        var element = document.getElementsByTagName("tr")[0];
        if (element.getAttribute("title") == "clicked") {
            $(this).css("color", "blue");
            $(this).css("background", "#DFDFDF");   
        }
        else {
            $(this).css("background", "#FFFFFF");
            $(this).css("color", "#222222");
        }
    });

HTML示例在这里：

<tr wicket:id="content-list" class="even" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 1"><span wicket:id="cell">1</span></td>
     <td wicket:id="cells" title="DC-MAN: AGR"><span wicket:id="cell">AGR</span></td>
     <td wicket:id="cells" title="DC-FOA: SS - MH"><span wicket:id="cell">SS - MH</span></td>
     <td wicket:id="cells" title="DC-SC: ABCDEFGH"><span wicket:id="cell">ABCDEFGH</span></td>
</tr>

<tr wicket:id="content-list" class="odd" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 2"><span wicket:id="cell">2</span></td>
     <td wicket:id="cells" title="DC-MAN: PPT"><span wicket:id="cell">PPT</span></td>
     <td wicket:id="cells" title="DC-FOA: DB - OP"><span wicket:id="cell">DB - OP</span></td>
     <td wicket:id="cells" title="DC-SC: MNBVCXY"><span wicket:id="cell">MNBVCXY</span></td>
</tr>

<tr wicket:id="content-list" class="even" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 3"><span wicket:id="cell">3</span></td>
     <td wicket:id="cells" title="DC-MAN: QWE"><span wicket:id="cell">QWE</span></td>
     <td wicket:id="cells" title="DC-FOA: AS - HG"><span wicket:id="cell">AS - HG</span></td>
     <td wicket:id="cells" title="DC-SC: LKJHGF"><span wicket:id="cell">LKJHGF</span></td>
</tr>

Answer 1

你已经起诉了JQuery Selector，为什么不在这里使用呢？

例如：

 var element = $("#idName")[0].setAttribute("title", "clicked");

或

var element = $(".className")[0].setAttribute("title", "clicked");

br来自paulq

Answer 2

您应该删除内联样式并改为分配类。

$('td').click(function(){
   $(this).parent().removeClass('hover').addClass('click'); 
}).mouseenter(function(){
    $(this).parent().addClass('hover');
}).mouseleave(function(){
    $(this).parent().removeClass('hover click');
});

DEMO

当然，我还没有完成整个代码。您需要修改要在css中应用的其他更改，我只是向您展示方式。祝你好运！

Javascript：如何在不使用getElementById的情况下更改获取和更改子元素的属性

2 个答案: