Question

我正在尝试将tbody分配到2个不同的类中。我似乎无法运行if语句，也许我没有正确使用语法？

条件1：如果tbody id =今天（yyyymm），则添加“当前”类
条件2：如果tbody id＆lt;今天（yyyymm），然后添加课程“过去”
条件3：如果tbody id>今天（yyyymm），然后添加什么都不做

$(function(){
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + (month<10 ? '0' : '') + month;
var checktbody = $('tbody').attr('id');
//alert(output);

if(checktbody == output) {
$(this).addclass("current");
}

//$("table#ttrate").find("tbody".attr("id") == output).addclass("current");

});

table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}

<table id="ttx">
<tbody id="201801">
<tr><th colspan="2">Jan-2018</th></tr>
<tr><td>Buy</td><td>23,000</td></tr>
<tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
<tr><th colspan="2">Dec-2017</th></tr>
<tr><td>Buy</td><td>20,000</td></tr>
<tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
<tr><th colspan="2">Nov-2017</th></tr>
<tr><td>Buy</td><td>10,000</td></tr>
<tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

Answer 1

您需要做的是检查每个 tbody是否匹配id。

您的原始语法var checktbody = $('tbody').attr('id');仅从所有机构获得一个 tbody。

所以，你需要做的是在纯JavaScript中使用for loop，或者在jQuery中使用jQuery.each()。

$('tbody').each(function(index, tb){

    // Do all your if-else logic here
    if (tb.id == output)
        $(tb).addClass(...);

    /* more logic here */

});

＆＃13;

$(function(){
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + (month<10 ? '0' : '') + month;

/* DELETE THIS
var checktbody = $('tbody').attr('id');
//alert(output);

if(checktbody == output) {
$(this).addclass("current");
}
*/

// ADD THIS
$('tbody').each(function(i, v){

  if (v.id == output)
    $(this).addClass('current');

  /* more logic here */

});

//$("table#ttrate").find("tbody".attr("id") == output).addclass("current");

});

＆＃13;

table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ttx">
<tbody id="201801">
<tr><th colspan="2">Jan-2018</th></tr>
<tr><td>Buy</td><td>23,000</td></tr>
<tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
<tr><th colspan="2">Dec-2017</th></tr>
<tr><td>Buy</td><td>20,000</td></tr>
<tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
<tr><th colspan="2">Nov-2017</th></tr>
<tr><td>Buy</td><td>10,000</td></tr>
<tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

＆＃13;

Answer 2

首先，抓住页面上的每个tbody，然后使用$.each遍历每个$.each( $("tbody"), function(index, el) { ... });：

Date

为了达到您所说的3个条件，我们必须重新考虑应用程序当前的编码方式。现在，您正在比较字符串以查看元素的日期是当前还是过去。

更好的方法是使用id个对象来促进日期比较。

请参阅下面的代码。我们使用正则表达式从每个tbody的{{1}}中提取年份和月份，然后我们使用它来创建Date对象，然后我们将其与今天{{1}进行比较object：

＆＃13;

Date

＆＃13;

$(function(){

  var now = new Date(); // today's date
  var nowYear = now.getFullYear();
  var nowMonth = now.getMonth();

  var today = new Date(nowYear, nowMonth);
  var todayTime = today.getTime(); // get today in milliseconds so we can run comparisons

  $.each( $("tbody"), function(index, el) {

    var $el = $(el);
    var id = $el.attr('id');

    // Get year, month, day using regex
    var rxArr = id.match(/(\d{4})(\d{2})/); 
    var year = rxArr[1];
    var month = parseInt(rxArr[2]) - 1; // we need month - 1 to pass to Date object

    var elDate = new Date(year, month);
    var elDateTime = elDate.getTime(); // returns milliseconds so we run comparisons

    if(elDateTime === todayTime) {
      $el.addClass("current");
    } else if(elDateTime < todayTime) {
      $el.addClass("past");
    }

  });
});

＆＃13;

table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}

＆＃13;

AddClass匹配语句

2 个答案: