猿问

检查表并根据同一个表中两个匹配列的值将 tr 内容加粗

我正在处理响应式表格,如果行内容与当前日期匹配,则希望将其设为粗体。


我将第一个孩子和 td 隐藏起来,因为我只需要它来执行某些功能


基于价值 <td data-label="TodaysDate">06-05-2020</td>和<td data-label="Date">05-05-2020</td>


如果值 if TodaysDate = Date那么我需要将此行加粗。


我怎么能用javascript做到这一点


https://codepen.io/KGuide/pen/MWwMZzP


function compareCellValues() {


  var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows


  rows.each(function() { //iterate over each row.


    var thisRow = $(this), //this is the current row

        TodaysDate = thisRow.find(".TodaysDate"), //this is the first value

        sDate = thisRow.find(".Date"); //this is the second value


    if (TodaysDate.text() !== sDate.text()) {

     thisRow.css("font-weight", "bold");

      

    }


    thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));


  });


}


window.onload = compareCellValues();


陪伴而非守候
浏览 111回答 1
1回答

呼唤远方

它对我有用,我已将日期输入6-05-2020并与之进行比较06-05-2020修复数据脚本后工作正常。<!DOCTYPE html><html ><head>&nbsp; <meta charset="UTF-8">&nbsp; <title>CodePen - A Pen by&nbsp; KGuide</title>&nbsp; <link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><table class="ramadan-time">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">TodaysDate</th>&nbsp; &nbsp; &nbsp; <th scope="col">Date</th>&nbsp; &nbsp; &nbsp; <th scope="col">Day</th>&nbsp; &nbsp; &nbsp; <th scope="col">Ramadan</th>&nbsp; &nbsp; &nbsp; <th scope="col">April/May</th>&nbsp; &nbsp; &nbsp; <th scope="col">Imsak</th>&nbsp; &nbsp; &nbsp; <th scope="col">Fajr</th>&nbsp; &nbsp; &nbsp; <th scope="col">Sunrise</th>&nbsp; &nbsp; &nbsp; <th scope="col">Dhuhr</th>&nbsp; &nbsp; &nbsp; <th scope="col">Asr</th>&nbsp; &nbsp; &nbsp; <th scope="col">Maghrib</th>&nbsp; &nbsp; &nbsp; <th scope="col">Isha</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>&nbsp; &nbsp; &nbsp; <td class="Date" data-label="Date">05-05-2020</td>&nbsp; &nbsp; &nbsp; <td data-label="Day">Friday</td>&nbsp; &nbsp; &nbsp; <td data-label="Ramadan">1</td>&nbsp; &nbsp; &nbsp; <td data-label="April/May">24</td>&nbsp; &nbsp; &nbsp; <td data-label="Imsak">4:17</td>&nbsp; &nbsp; &nbsp; <td data-label="Fajr">4:27</td>&nbsp; &nbsp; &nbsp; <td data-label="Sunrise">5:45</td>&nbsp; &nbsp; &nbsp; <td data-label="Dhuhr">12:20</td>&nbsp; &nbsp; &nbsp; <td data-label="Asr">3:49</td>&nbsp; &nbsp; &nbsp; <td data-label="Maghrib">6:49</td>&nbsp; &nbsp; &nbsp; &nbsp;<td data-label="Isha">8:07</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>&nbsp; &nbsp; &nbsp; <td class="Date" data-label="Date">06-05-2020</td>&nbsp; &nbsp; &nbsp; <td data-label="Day">Saturday</td>&nbsp; &nbsp; &nbsp; <td data-label="Ramadan">2</td>&nbsp; &nbsp; &nbsp; <td data-label="April/May">25</td>&nbsp; &nbsp; &nbsp; <td data-label="Imsak">4:16</td>&nbsp; &nbsp; &nbsp; <td data-label="Fajr">4:26</td>&nbsp; &nbsp; &nbsp; <td data-label="Sunrise">5:44</td>&nbsp; &nbsp; &nbsp; <td data-label="Dhuhr">12:20</td>&nbsp; &nbsp; &nbsp; <td data-label="Asr">3:50</td>&nbsp; &nbsp; &nbsp; <td data-label="Maghrib">6:49</td>&nbsp; &nbsp; &nbsp; &nbsp;<td data-label="Isha">8:08</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>&nbsp; &nbsp; &nbsp; <td class="Date" data-label="Date">07-05-2020</td>&nbsp; &nbsp; &nbsp; <td data-label="Day">Sunday</td>&nbsp; &nbsp; &nbsp; <td data-label="Ramadan">3</td>&nbsp; &nbsp; &nbsp; <td data-label="April/May">26</td>&nbsp; &nbsp; &nbsp; <td data-label="Imsak">4:15</td>&nbsp; &nbsp; &nbsp; <td data-label="Fajr">4:25</td>&nbsp; &nbsp; &nbsp; <td data-label="Sunrise">5:43</td>&nbsp; &nbsp; &nbsp; <td data-label="Dhuhr">12:19</td>&nbsp; &nbsp; &nbsp; <td data-label="Asr">3:48</td>&nbsp; &nbsp; &nbsp; <td data-label="Maghrib">6:50</td>&nbsp; &nbsp; &nbsp; &nbsp;<td data-label="Isha">8:10</td>&nbsp; &nbsp; </tr>&nbsp;&nbsp; </tbody></table>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答