Question

所以我的javascript代码正在创建一个表项列表，但是我希望它能够根据每次添加新项时的选择来更改行的颜色。这是我的代码

   if ( valid ) {
        $( "#tasks2 tbody" ).append( "<div id='taskList'><ul class='taskScreen2'><tr>" +
          "<td><h1>"  + type.val() + "</h1></td>"+"<td class='title'><h3>"+  title.val() + " </td>"  +"<td>"+ wordcount.val() + "</h3></td>"  +"<td><p>"+  description.val() + "</p></td>"  + "<td>"+ deadline.val() + "</td>"+
        "</tr></ul></div>"
                + "<script> if ($('#type').val()=='Dissertation')"
        + "{document.getElementById('taskList').style.backgroundColor = 'red';} </script>"
   );

这只会更改顶部项目的颜色，而任何新项目保持不变。我希望它在添加时更改新项目的bg颜色。我尝试在.append内部和外部包含该功能，但它不起作用。任何帮助将不胜感激。

Answer 1

你正在使用相同的ID附加div（这是错误的）。使用类而不是它应该有效。

Answer 2

试试这个：

if (valid) {
    var ids=$("#tasks2, #taskList, #type");
    for (var x=0; x<ids.length; x++) {
        ids.get(x).className=ids.get(x).id;
    }
    ids.attr("id", "");
    $(".tasks2 tbody").append("\
        <div class='taskList'><ul class='taskScreen2'><tr>"
        +"<td><h1>"
        +type.val()
        +"</h1></td>"
        +"<td class='title'><h3>"
        +title.val()
        +"</td>"
        +"<td>"
        +wordcount.val()
        +"</h3></td>"
        +"<td><p>"
        +description.val()
        +"</p></td>"
        +"<td>"
        +deadline.val()
        +"</td>"
        +"</tr></ul></div>"

        // Reply to Egidijus Poškus's comment: Here's how to do it!

        +"<script>$(\".type[value='Dissertation']\").css('background-color', 'red');$(\".type[value='Report']\").css('background-color', 'blue');\
    ");
}

用jQuery改变元素背景颜色.append

2 个答案: