Блог

Главная - Вопросы по программированию - Сравнить текст внутри пользовательского атрибута

Сравнить текст внутри пользовательского атрибута

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть длинная таблица, состоящая из таких строк 

 <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>

конечный результат, который мне нужен, — это изменить фон этой строки, когда время и дата совпадают с содержимым столбцов, отмеченных fieldname cf_1390 для части даты и cf_1380 для части времени.

я думал об использовании jquery для циклического просмотра строк, поиска содержимого ячейки, сравнения его с текущей датой и, если оно совпадает, изменения фона строки, но я не могу понять, как это сделать.

кто-нибудь может мне помочь с каким-нибудь примером jsfiddle ? 🙂

Комментарии:

1. Пожалуйста, отредактируйте свой вопрос и включите код jQuery, который вы пробовали.

2. Вы запрашиваете jsFiddle и даже не можете предоставить какой-либо пример кода, хм… К вашему сведению, вы должны использовать допустимые пользовательские атрибуты, используя data-*

Ответ №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');
        }
    });
});

Скрипка

Ответ №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 значение. Это зависит от ваших потребностей, но у нас недостаточно деталей, чтобы дать полный ответ.