У меня есть таблица, которая создается на основе записей из базы данных. Внутри tbody у меня есть tr, который создает каждую строку таблицы. Строка таблицы имеет несколько временных интервалов для одной и той же даты. Я хочу изменить цвет фона моего временного блока, если установлен флажок. Я установил свой флажок, я проверил с предупреждением и некоторым текстом внутри. Сейчас я пытаюсь изменить цвет фона, но в этом случае ничего не получалось. Вот мой код:

 <cfoutput query="qryTest" group="DateMeeting">
         <tbody>
            <tr>
                <td>#DateMeeting#</td>
            </tr>
            <cfoutput>
               <tr class="blockRow">
                  <td>#StartTime#</td>
                  <td>#EndTime#</td>
                  <td><input type="checkbox" name="block" id="block"></td>
               </tr>
            </cfoutput>
         </tbody>
 </cfoutput>

Сценарий Java:

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    $(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});

И мой css:

.red{
   background-color:red; 
}

Это рабочий код, который я обновил. Проблема номер один была в html структуре моего кода. Второй Если я использовал document.getElementById (''), я получал только первый цвет фона измененного фона, независимо от того, на какой строке я щелкаю. Поэтому мне пришлось использовать getElementByClassName. В любом случае я решил использовать JQuery addClass / removeClass. Спасибо всем за помощь в решении этой проблемы.

1
espresso_coffee 14 Дек 2015 в 18:00

3 ответа

Лучший ответ

Попробуй это:

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    $(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});

.red{
    background-color:red; 
}

<cfoutput query="qryTest" group="DateMeeting">
    <tbody>
        <tr>
            <td>#DateMeeting#</td>
            <cfoutput>
                     <div class="blockRow">
                     <td>#StartTime#</td>
                     <td>#EndTime#</td>
                     <td><input type="checkbox" name="block" id="block"></td>
                 </div>
            </cfoutput>
        </tr>
    </tbody>
</cfoutput>

Jsfiddle:

https://jsfiddle.net/3s83gj70/2/

Это получает ближайшую блокировку к текущему флажку, поэтому должно работать с более чем одним экземпляром. Так как у вас не может быть 2 элементов с одинаковым идентификатором, я изменил blockrow на класс.

Если вы хотите сделать другие вещи, основанные на том же условии, то вы можете сделать это:

$('input[type=checkbox]').on('change', function() {
    var div = $(this).closest('.blockRow');
    if($(this).is(":checked")){
        div.addClass("red");
        //checkbox is checked, do something
    }
    else
    {
        div.removeClass("red");
        //checkbox is not checked, do something else
    }
});
3
Dhunt 14 Дек 2015 в 21:15

Ваш HTML-код беспорядок. Во всяком случае, как правило:

$('input[type=checkbox]').click(function() {
  if($(this).is(':checked') {
    $(this).parents('tr').find('td:first').css('background', 'red'); 
  } else {
    $(this).parents('tr').find('td:first').css('background', 'white');
 }
});

Конечно, вы можете сузить область ввода: флажок селектора. Если это не ПЕРВЫЙ <td> в вашем <tr>, тогда вам лучше назначить ему класс и получить его вместе с ним.

ПРИМЕЧАНИЕ. DOM должен быть правильным <cfoutput> не может быть дочерним по отношению к <tr>; <div> не может иметь <td> в качестве прямого потомка; Неправильный обход Javascript в DOM.

1
Kyobul 14 Дек 2015 в 16:04

Легко:

 $('#blockRow').css("background-color","red")
 ------------------------------^

РЕДАКТИРОВАТЬ

Тогда вы не включаете библиотеку jQuery. Чтобы сделать чистый JS сделать это:

http://jsfiddle.net/bfss81sa/

 document.getElementById("box").style.backgroundColor = "red";

Вот вам полный фрагмент:

  var cbs = document.querySelectorAll('input[type=checkbox]');
  for(var i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('change', function() {
      if(this.checked) {
        document.getElementById("box").style.backgroundColor = "red";
      } else {
        document.getElementById("box").style.backgroundColor = "transparent";
      }
    });
  }
<input type="checkbox" name="block" id="block">
<div id="box">
The box
</div>
2
Marcos Pérez Gude 14 Дек 2015 в 15:09