Question

我有一个由这样的行组成的长桌

<tr id="row_369696" class="lvtColData" bgcolor="white" onmouseout="this.className='lvtColData'" onmouseover="this.className='lvtColDataHover'">
  <td width="2%"></td>

  <td bgcolor="#FFFFFF">
    27-10-2014
    <span style="display:none;" module="Accounts" fieldname="cf_1390" recordid="369696" type="metainfo"></span>
  </td>
  <td bgcolor="#FFFFFF">
    12:30
    <span style="display:none;" module="Accounts" fieldname="cf_1380" recordid="369696" type="metainfo"></span>
  </td>
</tr>

我需要的最终结果是，当时间和日期与日期部分的字段名cf_1390标记的列的内容和cf_1380的{{1}}匹配时，更改此行的背景时间部分。

我正在考虑使用jquery循环遍历行，查找单元格的内容，将其与现在的日期进行比较，如果匹配则更改行背景，但我无法弄清楚如何执行此操作。

有人可以通过一些jsfiddle示例来帮助我吗？：）

Answer 1

以下是循环显示行的示例，检查日期和时间。时间匹配变量（本例中我刚刚在顶部硬编码） - 然后如果找到日期和时间，则将它们设置为红色。那一行的时间匹配。

JS：

var date = "27-10-2014";
var time = "12:32";

$(document).ready(function(){
    $('#targetTable tr').each(function(i,e){
        var match = 0;
        $(this).children('td').each(function(i2,e2){
            content = $(e2).html().substring(0, $(e2).html().indexOf('<span')).trim();
            if(content == date){ match++; }
            if(content == time){ match++; }
        });
        if(match == 2){
            $(this).css('background','red');
            $(this).children('td').css('background','red');
        }
    });
});

Fiddle

Answer 2

这是一个易于理解的例子。

JSFiddle http://jsfiddle.net/h3Xd3/

HTML

<table id="myTable">
<tr id="row_369696" >
   <td bgcolor="#FFFFFF">
    27-10-2014
    <span style="display:none;" module="Accounts" fieldname="cf_1390" recordid="369696" type="metainfo"></span>
  </td>
  <td bgcolor="#FFFFFF">
    12:30
    <span style="display:none;" module="Accounts" fieldname="cf_1380" recordid="369696" type="metainfo"></span>
  </td>
</tr>
</table>

CSS .highlight{background-color:lightgrey;}

<强> JQUERY

function datesEqual(a, b)
{
   return (!(a>b || b>a))
}

$(function () {
    // Handler for .ready() called.
    $("#myTable tr").each(function(){
        //Get date and hour. Split each item by the appropriate separator
        var date_row = $(this).find("td:eq(0)").text().split("-");
        var hour_row = $(this).find("td:eq(1)").text().split(":");

        var date_object = new Date(date_row[2], date_row[1] - 1, date_row[0], hour_row[0], hour_row[1]);

        var YOUR_OTHER_DATE = new Date(date_row[2], date_row[1] - 1, date_row[0], hour_row[0], hour_row[1]); //You have to change this line

        if ( datesEqual(YOUR_OTHER_DATE, date_object) == true){
            $(this).find("td").addClass("highlight");
        }

    });
});

不要忘记来更改YOUR_OTHER_DATE值。这取决于您的需要，但我们没有足够的细节来提供完整的答案。

比较自定义属性中的文本

2 个答案: