2014-07-03 67 views
-2

我一張長桌這樣比較文本中的自定義屬性

<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

我想使用jQuery來循環槽行,找到單元格的內容,將它與現在的日期進行比較,如果它匹配改變行背景,但我不知道如何去做。

有人可以幫我一些jsfiddle的例子嗎? :)

+5

請編輯你的問題,幷包括你試過的jQuery代碼。 –

+2

你問一個jsFiddle,甚至不能提供任何示例代碼,嗯...... FYI,你應該使用有效的自定義屬性,使用'data- *' –

回答

0

這是一個循環遍歷行的例子,檢查日期&時間是否與變量相匹配(其中我剛剛在此示例的頂部進行了硬編碼) - 然後將它們設置爲紅色,如果它發現兩個日期&在該行的時間匹配。

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

0

下面是一個容易理解的例子。

的jsfiddlehttp://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的值。這取決於你的需要,但我們沒有足夠的細節來給出完整的答案。