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

问题描述 投票：1回答：1

我正在处理响应表，并且如果行内容与当前日期匹配，则希望将其内容加粗。

我将第一个孩子的t＆td隐藏起来，因为我仅在某些功能上需要它

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

如果值，如果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();
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}
.ramadan-time > thead tr th:first-child{color:red; display:none;}
.ramadan-time > tbody tr td:first-child{color:red; display:none;}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}


table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
   font-size: 12px;
}

table th {
  font-size: .85em;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 380px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
<table class="ramadan-time">
  <thead>
    <tr>
      <th scope="col">TodaysDate</th>
      <th scope="col">Date</th>
      <th scope="col">Day</th>
      <th scope="col">Ramadan</th>
      <th scope="col">April/May</th>
      <th scope="col">Imsak</th>
      <th scope="col">Fajr</th>
      <th scope="col">Sunrise</th>
      <th scope="col">Dhuhr</th>
      <th scope="col">Asr</th>
      <th scope="col">Maghrib</th>
      <th scope="col">Isha</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
      <td class="Date" data-label="Date">05-05-2020</td>
      <td data-label="Day">Friday</td>
      <td data-label="Ramadan">1</td>
      <td data-label="April/May">24</td>
      <td data-label="Imsak">4:17</td>
      <td data-label="Fajr">4:27</td>
      <td data-label="Sunrise">5:45</td>
      <td data-label="Dhuhr">12:20</td>
      <td data-label="Asr">3:49</td>
      <td data-label="Maghrib">6:49</td>
       <td data-label="Isha">8:07</td>
    </tr>
    
     <tr>
      <td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
      <td class="Date" data-label="Date">06-05-2020</td>
      <td data-label="Day">Saturday</td>
      <td data-label="Ramadan">2</td>
      <td data-label="April/May">25</td>
      <td data-label="Imsak">4:16</td>
      <td data-label="Fajr">4:26</td>
      <td data-label="Sunrise">5:44</td>
      <td data-label="Dhuhr">12:20</td>
      <td data-label="Asr">3:50</td>
      <td data-label="Maghrib">6:49</td>
       <td data-label="Isha">8:08</td>
    </tr>
    
    <tr>
      <td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
      <td class="Date" data-label="Date">07-05-2020</td>
      <td data-label="Day">Sunday</td>
      <td data-label="Ramadan">3</td>
      <td data-label="April/May">26</td>
      <td data-label="Imsak">4:15</td>
      <td data-label="Fajr">4:25</td>
      <td data-label="Sunrise">5:43</td>
      <td data-label="Dhuhr">12:19</td>
      <td data-label="Asr">3:48</td>
      <td data-label="Maghrib">6:50</td>
       <td data-label="Isha">8:10</td>
    </tr> 
  
  </tbody>
</table>

我正在使用以下代码

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();
javascript html css
1个回答
0
投票

它为我工作，我将日期输入为6-05-2020并将其与06-05-2020进行比较

修复数据脚本后效果很好。

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by  KGuide</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<table class="ramadan-time">
  <thead>
    <tr>
      <th scope="col">TodaysDate</th>
      <th scope="col">Date</th>
      <th scope="col">Day</th>
      <th scope="col">Ramadan</th>
      <th scope="col">April/May</th>
      <th scope="col">Imsak</th>
      <th scope="col">Fajr</th>
      <th scope="col">Sunrise</th>
      <th scope="col">Dhuhr</th>
      <th scope="col">Asr</th>
      <th scope="col">Maghrib</th>
      <th scope="col">Isha</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
      <td class="Date" data-label="Date">05-05-2020</td>
      <td data-label="Day">Friday</td>
      <td data-label="Ramadan">1</td>
      <td data-label="April/May">24</td>
      <td data-label="Imsak">4:17</td>
      <td data-label="Fajr">4:27</td>
      <td data-label="Sunrise">5:45</td>
      <td data-label="Dhuhr">12:20</td>
      <td data-label="Asr">3:49</td>
      <td data-label="Maghrib">6:49</td>
       <td data-label="Isha">8:07</td>
    </tr>

     <tr>
      <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
      <td class="Date" data-label="Date">06-05-2020</td>
      <td data-label="Day">Saturday</td>
      <td data-label="Ramadan">2</td>
      <td data-label="April/May">25</td>
      <td data-label="Imsak">4:16</td>
      <td data-label="Fajr">4:26</td>
      <td data-label="Sunrise">5:44</td>
      <td data-label="Dhuhr">12:20</td>
      <td data-label="Asr">3:50</td>
      <td data-label="Maghrib">6:49</td>
       <td data-label="Isha">8:08</td>
    </tr>

    <tr>
      <td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
      <td class="Date" data-label="Date">07-05-2020</td>
      <td data-label="Day">Sunday</td>
      <td data-label="Ramadan">3</td>
      <td data-label="April/May">26</td>
      <td data-label="Imsak">4:15</td>
      <td data-label="Fajr">4:25</td>
      <td data-label="Sunrise">5:43</td>
      <td data-label="Dhuhr">12:19</td>
      <td data-label="Asr">3:48</td>
      <td data-label="Maghrib">6:50</td>
       <td data-label="Isha">8:10</td>
    </tr> 

  </tbody>
</table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.