Оптимизировать код
 

Добрый день!

Прошу помочь произвести оптимизацию кода на jQuery. Только недавно начал изучать его. Есть таблица, с полем даты завершения. Необходимо в зависимости от текущей даты применять различные стили.

<script type="text/javascript">
    $(document).ready(
  function () {
      var systemDateArr = $("#SystemDate").text().split(".");
      var convertedSystemDate = Date.parse(systemDateArr[1] + '/' + systemDateArr[0] + '/' + systemDateArr[2]);

      var tr = $(".listtable tr").filter(function () {
          var endDate = $(this).children('td:nth-child(4)').text();
          if (endDate) {
              var endDateArr = endDate.split(".");
              var convertedEndDate = Date.parse(endDateArr[1] + '/' + endDateArr[0] + '/' + endDateArr[2]);

              [B]if (convertedEndDate > convertedSystemDate)[/B]
                  return false;
              else
                  return true;
          }
      }).addClass("PriorityTaskOverdue");
  }
);
</script>

В зависимости от условий сравнений мне приходиться каждый раз дублировать этот скрипт.

а можно пример таблички?
у вас для каждого из условий применяются разные стили или только один?

Стили разные.

<table class = "listtable">
            <tr>
                <th></th>
                <th>
                    Описание
                </th>
                <th>
                    Дата начала
                </th>
                <th>
                    Дата завершения
                </th>
                <th>
                    Фактическая дата
                </th>
                <th>
                    Процент завершения
                </th>
                <th>
                    Ответственные
                </th>
                <th>
                    Статус
                </th>
                <th>
                    Комментарии
                </th>
            </tr>
 
            <tr>    
                <td>
                    <a href="/TODOList/Details/11">Открыть</a>
                </td>
                <td>
                    Описание задачи
                </td>
                <td>
                    20.03.2011
                </td>
                <td>
                    02.01.2011
                </td>
                <td>
	        27.02.2011                
	     </td>
                <td>
                    100%
                </td>
                <td>
                    
                </td>
                <td>
                    Выполнено
                </td>
                <td>
                    Комментарии
                </td>
            </tr>
        </table>

не совсем понял, что вы хотите сделать, но посмотрите вот этот вариант. возможно подойдет

$(document).ready(function () {
	var systemDateArr = $("#SystemDate").text().split(".");
	var convertedSystemDate = Date.parse(systemDateArr[1] + '/' + systemDateArr[0] + '/' + systemDateArr[2]);

	$(".listtable tr").each(function () {
		var obj = this
			endDate = $(obj).children('td:nth-child(4)').text();
		if (endDate){
			var	endDateArr = endDate.split("."),
			convertedEndDate = Date.parse(endDateArr[1] + '/' + endDateArr[0] + '/' + endDateArr[2]);
			
			checkDate(convertedEndDate,obj);
		};
	});
	
	function checkDate(convertedEndDate,obj) {
		if (/* условие*/ ){
			/*
				var ClassName;	// класс который хотите присвоить
			*/
			
			updateClass(obj,ClassName);
		};
	};
	
	function updateClass(obj,ClassName) {
		$(obj).addClass(ClassName)
	};
});

Вроде разобрался как сделать, вот код:

<script type="text/javascript">
    $(document).ready(
  function () {
      var systemDateArr = $("#SystemDate").text().split(".");
      var convertedSystemDate = Date.parse(systemDateArr[1] + '/' + systemDateArr[0] + '/' + systemDateArr[2]);
      $(".listtable tr").filter(function () {

          var status = $(this).children('td:nth-child(6)').text();

          if (status) {
              var endDate = $(this).children('td:nth-child(4)').text();
              var endDateArr = endDate.split(".");
              var convertedEndDate = Date.parse(endDateArr[1] + '/' + endDateArr[0] + '/' + endDateArr[2]);

              if (status.match('100%')) {
                  $(this).children('td:nth-child(4)').css('background', '#33FF33');
                  return true;
              }
              else {
                  if (convertedEndDate < convertedSystemDate) {
                      $(this).children('td:nth-child(4)').css('background', '#F3665F');
                      return true;
                  }
                  if (convertedEndDate >= convertedSystemDate && convertedEndDate <= (convertedSystemDate + (7 * 24 * 3600 * 1000))) {
                      $(this).children('td:nth-child(4)').css('background', '#FFFF00');
                      return true;
                  }
              }
          }
      });
  }
);
</script>

Спасибо lalala

Ещё не понял почему, но у меня работает только вариант с .css, а вот addClass работает только для всей строки, если вместо css сделать addClass, то не чего не происходит.

addClass добавляет стиль к элементу

не стиль, а признак принадлежности к классу. опишите классы в css свойствах и с помощью addClass привязывайте их к нужным элементам.. ну и соответственно removeClass поможет эти связи устранить.