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

我有一张很简单的桌子。 只要有$name，类为“name check”的每个TR都将在php中循环。每个新的TR都会得到一个新的类名和一个计数器，因此此表中TR的结构基本上如下所示：

已解决

---

两个答案都非常完美。谢谢大家。

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

使用jQuery绑定的单击函数中的event

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

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

使用jQuery绑定的单击函数中的event

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

$（“表”）。在（“单击”，“td.检查日期”，函数（）上{
var行=$（this）.tr，
checked=row.find（“.one、.two、.three”）.length，//获取单击/检查的列数
toCheck=row.find（“.check date”）.length；//获取要检查的列数
row.find（“.sum-up span”）.text（toCheck-checked）；//在“sum-up”列中打印缺少的检查
});
//这仅添加了“单击”功能以获得更好的可见性：D
（功能（）{
变量类=[“一”、“二”、“三”、“三]；
$（“td.check date”）。在（“单击”，函数（）{
var td=$（此），
点击=td.数据（“点击”）|| 0；
td.数据（“点击”，点击+1）；
this.className=“check date”+类[单击%classes.length]；
});
}（））

td{
边框：实心1px黑色；
填充：20px
}
.1{背景色：绿色}
.2{背景色：黄色}
.three{背景色：红色}

0
0

$（“表”）。在（“单击”，“td.检查日期”，函数（）上{
var行=$（this）.tr，
checked=row.find（“.one、.two、.three”）.length，//获取单击/检查的列数
toCheck=row.find（“.check date”）.length；//获取要检查的列数
row.find（“.sum-up span”）.text（toCheck-checked）；//在“sum-up”列中打印缺少的检查
});
//这仅添加了“单击”功能以获得更好的可见性：D
（功能（）{
变量类=[“一”、“二”、“三”、“三]；
$（“td.check date”）。在（“单击”，函数（）{
var td=$（此），
点击=td.数据（“点击”）|| 0；
td.数据（“点击”，点击+1）；
this.className=“check date”+类[单击%classes.length]；
});
}（））

td{
边框：实心1px黑色；
填充：20px
}
.1{背景色：绿色}
.2{背景色：黄色}
.three{背景色：红色}

0
0

试试这个

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

试试这个

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

---

在

第四次

点击中会发生什么？@SherinJose它将删除这些类，这意味着只有原始类将保留。这些额外的类只为td添加背景色。它们代表“休假日”、“假日”和“病假”。好的。。然后，下一次单击再次从

one

开始，然后从

two

和

two

开始。。对吗？@SherinJose no。下一次单击将删除所有额外的类，因此我们只剩下默认类“.check date”。“.check date将始终保留，但我们通过3次单击切换3个类，第四次单击将删除它们。是的..发布了一个答案

fourth

click？@SherinJose它将删除这些类，这意味着只有原始类将保留。这些额外的类只会为td添加背景色。它们代表“休假日”“假日”和“病假”。好的。然后下一次单击将从

1

，然后从

2

和

3

开始。对吗？@SherinJose no。下一次单击将删除所有额外的类，因此我们将保留默认类“.check date”。。check date将始终保留，但我们将通过3次单击切换3个类，第四次点击会删除它们。是的。。贴出答案

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

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