从每个TR中选择具有特定类的TD并进行数学运算

Selecting TD with specific classes from each TR and do math

本文关键字：TD 运算 TR 选择      更新时间：2023-09-26

我有一个非常简单的表格。只要有$name，每个带有类"name-check"的TR都会在php中循环。每个新 TR 都会获得一个带有计数器的新类名，因此基本上此表中 TR 的结构如下所示：表的屏幕截图

<tr class="name-check name_1">
<tr class="name-check name_2">
<tr class="name-check name_3">
etc.

这是每个TR的内容：

// Content of TR
<tr class="name-check name_1">
    <td class="name">
      <?php echo $name; ?>
    </td>
    <td class="check-date">
        <label class="check-label"></label>    
    </td>
    <td class="check-date">
        <label class="check-label"></label>     
    </td>
    <td class="check-date">
        <label class="check-label"></label>      
    </td>
    <td class="dont-count"></td>
    <td class="check-date">
        <label class="check-label"></label>       
    </td>

    <td class="sum-up" align="center">
        <span class="sum-up-span">0</span>
    </td>
 </tr>

这是第一个包含 TH 的 TR：

// Table TH
<tr class="dates">
    <th></th>
    <th class="dat">1 </th>
    <th class="dat">2 </th>
    <th class="dat">3 </th>
    <th class="dat">4 </th>
    <th class="dont-count-th">Don't count</th> 
</tr>
// Table TH End and after this tr comes:
<tr class="name-check name_1">...
<tr class="name-check name_2">
<tr class="name-check name_3">

当用户点击带有"检查日期"类的TD时，TD将获得一个额外的类别。 实际上这是一个点击循环：- 1次点击添加类.one，- 2 时间点击添加类 .2，- 3 时间点击添加类 .3。

我想要的基本上是，对于每一行，获取具有这三个类中的任何一个的TD，并从具有"检查日期"类的TD数量中减去它们，或者我可以将"TH"与类".dat"一起使用。结果应显示在每个 tr 的最后一个 td 中，即类为".sum-up-span"的跨度。

我让它适用于单行，但多行，它得到所有值。

var totalDays = $("tr.dates th.dat").length;
var daysOff = $("tr.name-check").each(function() {
              $( "td.odsutan, td.godisnji, td.praznik" ).length;
var sum = totalDays - daysOff;
$(".sum-up-span").each(function () { 
    $(this).html("There " + sum + " from " + totalDays);
});

解决提供的两个答案都非常完美。谢谢你们。

试试这个，

$("td.check-date").click(function(e) {
    if($(this).hasClass("one"))
        $(this).removeClass("one").addClass("two");
    else if($(this).hasClass("two"))
        $(this).removeClass("two").addClass("three");
    else if($(this).hasClass("three"))
        $(this).removeClass("three");
    else
        $(this).addClass("one");
    var tr                  = $(this).closest("tr");
    var td_count            = tr.find("td.check-date").length;
    var clicked_td_count    = tr.find("td.check-date.one, td.check-date.two, td.check-date.three").length;
    tr.find("span.sum-up-span").text(td_count - clicked_td_count);
});

jQuery 选择器不限于任何容器，因此它们会搜索整个页面。您需要做的是将它们限制在您单击的 tr 中。

使用您在 jQuery 绑定单击函数中获得的事件e执行此操作：

function(e) {
  var currentRow = jQuery(e.currentTarget);
  var totalDays = $("tr.dates th.dat").length;
  var daysOff = $("td.odsutan, td.godisnji, td.praznik", currentRow).length;
  var sum = totalDays - daysOff;
  $(".sum-up-span", currentRow).html("There " + sum + " from " + totalDays);
}

注意：如果您没有 jQuery 绑定点击事件并且需要帮助，请询问。

$("table").on("click", "td.check-date", function() {
  var row = $(this).closest("tr"),
      checked = row.find(".one, .two, .three").length,  // get the number of clicked/checked columns
      toCheck = row.find(".check-date").length;  // get number of columns to check
    
  row.find(".sum-up-span").text(toCheck - checked);  // print missing checks in "sum-up" column
});
// this only adds the "click" feature for a better visibility :D
(function() {
  var classes = ["one", "two", "three", ""];
  $("td.check-date").on("click", function() {
    var td = $(this),
        clicked = td.data("clicked") || 0;
    td.data("clicked", clicked + 1);
    this.className = "check-date " + classes[clicked % classes.length];
  });
}())
td {
  border: solid 1px black;
  padding: 20px
}
.one { background-color: green }
.two { background-color: yellow }
.three { background-color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
     <tr class="name-check">
      <td class="name"></td>
      <td class="check-date"></td>
      <td class="check-date"></td>
      <td class="check-date"></td>
      <td class="dont-count"></td>
      <td class="check-date"></td>
      <td class="sum-up" align="center">
        <span class="sum-up-span">0</span>
      </td>
     </tr>
     <tr class="name-check">
      <td class="name"></td>
      <td class="check-date"></td>
      <td class="check-date"></td>
      <td class="check-date"></td>
      <td class="dont-count"></td>
      <td class="check-date"></td>
      <td class="sum-up" align="center">
        <span class="sum-up-span">0</span>
      </td>
     </tr>
  </tbody>
</table>

相关文章：