更改附加tr的背景颜色

时间:2017-09-29 08:28:59

标签: javascript jquery

嘿我在表中检查当前DateTime是否在当前行的开始DateTime和结束日期时间之间后添加了一些行,如果这是真的我想要更改行的背景颜色。

   $('#calendarTable').append(calendarRow);
   setCurrentLesson(field, calendarRow);

function setCurrentLesson(field, calendarRow){
  var currentDateTime = new Date();
  currentDateTime.setFullYear(field.tafel_datum.split("-")[0]);
  currentDateTime.setMonth(field.tafel_datum.split("-")[1]);
  currentDateTime.setMonth(currentDateTime.getMonth() -1); 
  currentDateTime.setDate(field.tafel_datum.split("-")[2]);

  //console.log(currentDateTime.setMonth(0)); -- Januar

  var startTime = field.tafel_von;
  var endTime = field.tafel_bis;

  var startDateTime =new Date(currentDateTime.getTime());
  startDateTime.setHours(startTime.split(":")[0]);
  startDateTime.setMinutes(startTime.split(":")[1]);
  startDateTime.setSeconds(startTime.split(":")[2]);

  endDateTime = new Date(currentDateTime.getTime());
  endDateTime.setHours(endTime.split(":")[0]);
  endDateTime.setMinutes(endTime.split(":")[1]);
  endDateTime.setSeconds(endTime.split(":")[2]);

  if(startDateTime < currentDateTime && endDateTime > currentDateTime){

** Change Background Color of the calendarRow**
     }
    }

1 个答案:

答案 0 :(得分:0)

您可以编辑setCurrentLesson()函数中的样式属性,因为您将其作为参数之一传递。

var index = $('#calendarTable').find(`tr`).length-1;
$('#calendarTable').find(`tr`).eq(index).attr('style','background-color:green;');

或者你也可以添加一个类

var index = $('#calendarTable').find(`tr`).length-1;
$('#calendarTable').find('tr').eq(index).addClass('activeRow');

&#13;
&#13;
var index = $('#calendarTable').find(`tr`).length-1; $('#calendarTable').find(`tr`).eq(index).attr('style','background-color:green;');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="calendarTable" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
&#13;
&#13;
&#13;