從每個TR中選擇具有特定類別的TD並進行數學運算

Question

我有一個相當簡單的表格。 只要有$ name，每個具有「name-check」類的TR將在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"> 

當用戶點擊與類TD「入住日期」是TD將獲得一個額外的類。其實它是一個點擊循環： - 1次點擊添加class .one， - 2次點擊添加class .two， - 3次點擊添加class .three。

我想要的基本上是，對於每一行，獲得具有這三個類中的任何一個的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); 
}); 

解決 提供工作的高度完美這兩個答案。謝謝你們。

Answer 1

試試這個，

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

Answer 2

您的jQuery選擇器不限於任何容器，因此它們會搜索整個頁面。你需要做的是將他們限制在你點擊的那個tr。

使用事件e你在一個jQuery勢必點擊功能得到這樣做：

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 3

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