Struts2 + jQuery，如何更新 table 中选中项的样式

Question

我有一个 table，每行都有一个复选框和一个 :

<s:iterator value="myforms" var="form">
<tr>    
  <td class="text-center">
    <input type="checkbox" name="mycheck" value="on" class="my-check" data-form='<s:property value="#form.id"/>'>
  </td>
  <td class="text-center">
    <s:property value="#form.dateString"/>
  </td>
</tr>
</s:iterator>

和 table 下方名为“u”的复选框：

<input type="checkbox" name="u" id="u" value="true"/>

选中“u”时，更改所有选中的日期字符串（选中行复选框的所有行）的颜色。当“u”未选中时，所有 dateString 颜色为黑色。如何找到所有选中的 dateString 并更改它们的颜色。我能想到的最好的是这个但不起作用：

$(function() {
  $('#u').click(function() {
    changeU(this.checked);
  });
});
function changeU(checked) {
  $('input:checkbox[class=my-check]:checked').each(function(i, e) {
    let c =  checked ? "red" : "black";
    $('<input>').xxx.css('color', c);
  });
};

Answer 1

按照现在的结构，您将不得不依赖 DOM 订购，这会很烦人。

在 <td> 上使用与复选框相同的方式使用 <s:iterator> 值。

这样就有一个可靠、一致的选择器用于包含日期字符串的 <td>。

$(function() {
  $('#u').click(function() {
    changeU(this.checked);
  });
});

function changeU(checked) {
  $('input:checkbox[class=my-check]:checked').each(function(i, e) {
    const color = checked ? "red" : "black";
    const dataId = e.dataset.form
    $(`td[data-form=${dataId}]`).css('color', color)
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="mycheck" value="on" class="my-check" data-form='1'>
    </td>
    <td class="text-center date-string" data-form='1'>
      some date
    </td>
  </tr>

  <tr>
    <td class="text-center">
      <input type="checkbox" name="mycheck" value="on" class="my-check" data-form='2'>
    </td>
    <td class="text-center date-string" data-form="2">
      some date
    </td>
  </tr>
</table>

<input type="checkbox" name="u" id="u" value="true" /> Click me

Struts2 + jQuery，如何更新 table 中选中项的样式

Struts2 + jQuery, how to update style of checked items in a table

jquery

struts2