用jQuery對話框改變每一行的顏色.append

Question

我正在構建一個應用程序，它允許將任務添加到列表中，並根據所作的選擇更改它們的顏色。

我使用它來建立項目清單，現在我怎麼可能實現這樣的事情http://s4.postimg.org/npplicbnh/2222.png

這裏是我的.append代碼@Narawa遊戲幫助我。然而，此時每當添加新項目時，它將在其之前添加的每個其他項目的顏色改變爲相同的顏色。我希望能夠擁有不同顏色的不同項目。

if (valid) { 
    $("#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>" 
    +"<script>var typeSUP=$('#type').val();var taskS=$('.taskList');if(typeSUP=='Dissertation'){taskS.css('border-color', 'red');}else if (typeSUP=='Report'){taskS.css('border-color', 'blue');}\ 
"); 

這裏有一個例子的jsfiddle -​​

所有幫助是值得歡迎的。乾杯

Answer 1

假設你想要的風格是剛剛添加的錶行，並讓別人不動，然後嘗試：

if (valid) { 
    var $task = $("<tr class='taskList'>" 
     + "<td><h1>" + type.val() + "</h1></td>" 
     + "<td class='title'><h3>" + title.val() + "</h3></td>" 
     + "<td>" + wordcount.val() + "</td>" 
     + "<td><p>" + description.val() + "</p></td>" 
     + "<td>" + deadline.val() + "</td>" 
     + "</tr>" 
    ).appendTo("#tasks2 tbody"); 
    switch($('#type').val()) { 
     case 'Dissertation': 
      $task.css('border-color', 'red'); 
     break; 
     case 'Report': 
      $task.css('border-color', 'blue'); 
     break; 
     default: 
      $task.css('border-color', 'green'); 
    } 
} 

收拾，因爲附加<div><ul><tr>...</tr></ul></div>到tbody元素是無稽之談。

編輯迴應@Tushars評論

或者，寫默認的CSS指令和每個任務類型：

.taskList { 
    border-color: green; 
} 
.taskList.Dissertation { 
    border-color: red; 
} 
.taskList.Report { 
    border-color: blue; 
} 

通過應用適當的類行然後風格行：

if (valid) { 
    var type = type.val(); 
    $("<tr class='taskList'>" 
     + "<td><h1>" + type.val() + "</h1></td>" 
     + "<td class='title'><h3>" + title.val() + "</h3></td>" 
     + "<td>" + wordcount.val() + "</td>" 
     + "<td><p>" + description.val() + "</p></td>" 
     + "<td>" + deadline.val() + "</td>" 
     + "</tr>" 
    ).addClass(type).appendTo("#tasks2 tbody"); 
}