我正在处理响应式表格，并且希望在与当前日期匹配的情况下将行内容设为粗体。我将第一个孩子 th 和 td 隐藏起来，因为我只需要它来实现某些功能基于 <td data-label="TodaysDate">06-05-2020</td>和的价值<td data-label="Date">05-05-2020</td>if value if TodaysDate = Date那么我需要将此行设为粗体。我怎样才能使用javascript做到这一点https://codepen.io/KGuide/pen/MWwMZzPfunction 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; }
1 回答
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
它对我有用，我已将日期放入并6-05-2020与它进行比较06-05-2020
修复数据脚本后工作正常。
<!DOCTYPE html>
<html >
<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>
- 1 回答
- 0 关注
- 98 浏览
添加回答
举报
0/150
提交
取消