Question

我有一个非常简单的表。每个TR都有类＆＃34; name-check＆＃34;只要有$ name就会在php中循环。每个新的TR都带有一个带有计数器的新类名，所以基本上这个表中TR的结构如下所示： Screenshot of table

<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">

当用户点击带有类＆＃34;检查日期＆＃34;的TD时TD将获得额外的课程。实际上它是一个点击循环： - 1次点击添加类.one， - 2次点击添加类.two， - 3次点击添加类.three。

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

我得到了一行，但是多行，它获得了所有的值。

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);
});

解决两个答案提供的工作非常完美。谢谢大家。

Answer 1

您的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绑定点击事件并需要帮助，请询问。

Answer 2

＆＃13;

$("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];
  });
}())

＆＃13;

td {
  border: solid 1px black;
  padding: 20px
}

.one { background-color: green }
.two { background-color: yellow }
.three { background-color: red }

＆＃13;

<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>

＆＃13;

Answer 3

试试这个，

$("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);
});

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

3 个答案: