Как изменить цвет фона входного текста внутри строки таблицы, когда установлен флажок

Question

Я хочу изменить цвет фона входного текста / текстовой области, содержащихся внутри td строки таблицы, данные поступают из базы данных, каждая строка содержит флажок, поэтому при нажатии флажка цвет фона входного текста изменится,

$('#myTable .nrml').click(function() {
  var currentRow = $(this).closest("tr");
  var col4 = currentRow.find("td:eq(1)").html();
  alert(col4);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1' id="myTable">
  <tr>

    <th>Parameter</th>
    <th>Result</th>
    <th>Normal</th>
    <th>Abornaml Values</th>
    <th>Normal Values</th>
    <th>Critical Values</th>

  </tr>
  <tr>
    <td>Glucose</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>60-80</td>
    <td>110-120</td>

  </tr>
  <tr>
    <td>Lipid</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>55-90</td>
    <td>100-180</td>

  </tr>
  <tr>
    <td>Keratine</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>
  <tr>
    <td>Pressusre</td>
    <td><textarea></textarea></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>

</table>

Answer 1

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

<script type="text/javascript">
    $('#myTable .nrml').click(function() {
        var currentRow=$(this).closest("tr");
        var val = currentRow.find("td:eq(1) input").val();
        if (val && this.checked == true) {
            var col4=currentRow.find("td:eq(1) input").css('background-color','green');
        } else {
            var col4=currentRow.find("td:eq(1) input").css('background-color','');
        }
});
</script>

Answer 2

Будьте осторожны с некоторыми ответами, которые появятся здесь, они будут хрупкими (изменение вашего HTML может нарушить ваш код).

Я бы порекомендовал прочитать: Разделение вашего HTML, CSS иJavaScript .

Вы сразу сможете распознать, что если кто-то решит обернуть вашу текстовую область или изменить таблицу на <div>, потому что он хочет использовать загрузчик, ваш код больше не работает (хрупкийcode).

Вместо этого, представьте несколько классов, которые описывают, что вы пытаетесь сделать:

.input-bg-container

.js-bg-trigger

.input-bg-active

.input-bg-target

Обновите ваш html:

<tr class="input-bg-container">
 <td>Glucose</td>
 <td><input class="txtbox input-bg-target" type="text"></td>
 <td><input type="checkbox" class="nrml js-input-bg"></td>
 <td><input type="checkbox" class="abnrml"></td>
 <td>60-80</td>
 <td>110-120</td>
</tr>

обновите ваш jQuery:

$('.input-bg-container .js-input-bg').on('click', function() {
  var $this = $(this);
  var isChecked = $this.prop('checked');
  var $container = $this.closest('.input-bg-container');
  var $target = $container.find('.input-bg-target');
  var $target.toggleClass('input-bg-active', isChecked);
});

Теперь примените любой css к желаемому активному классу.

Answer 3

Попробуйте этот код, это решит вашу проблему

$('#myTable .nrml').click(function() { var currentRow=$(this).closest("tr"); var col4=currentRow.find("td:eq(1) input").addClass("red"); });

css:

.red{ background-color: red }

Answer 4

используйте .toggleClass () метод для применения класса, который содержит CSS для ввода.

$('input.nrml').on('click', function() {
var currentRow=$(this).closest("tr");
 var col4=currentRow.find("td:eq(1)").find('input[type=text], textarea');
	col4.toggleClass('textboxBgColor',this.checked);
});

.textboxBgColor {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border='1' id="myTable">
  <tr>

    <th>Parameter</th>
    <th>Result</th>
    <th>Normal</th>
    <th>Abornaml Values</th>
    <th>Normal Values</th>
    <th>Critical Values</th>

  </tr>
  <tr>
    <td>Glucose</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>60-80</td>
    <td>110-120</td>

  </tr>
  <tr>
    <td>Lipid</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>55-90</td>
    <td>100-180</td>

  </tr>
  <tr>
    <td>Keratine</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>
  <tr>
    <td>Pressusre</td>
    <td><textarea></textarea></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>

</table>

Answer 5

Как это?

с использованием toggleClass с проверенным логическим значением

$('#myTable .nrml').click(function() {
  $(this).closest("tr")
   .find("input[type=text], textarea")
   .toggleClass('nrml',this.checked);
});

textarea.nrml,input[type=text].nrml { background-color: green }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1' id="myTable">
  <tr>

    <th>Parameter</th>
    <th>Result</th>
    <th>Normal</th>
    <th>Abornaml Values</th>
    <th>Normal Values</th>
    <th>Critical Values</th>

  </tr>
  <tr>
    <td>Glucose</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>60-80</td>
    <td>110-120</td>

  </tr>
  <tr>
    <td>Lipid</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>55-90</td>
    <td>100-180</td>

  </tr>
  <tr>
    <td>Keratine</td>
    <td><input class="txtbox" type="text"></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>
  <tr>
    <td>Pressusre</td>
    <td><textarea></textarea></td>
    <td><input type="checkbox" class="nrml"></td>
    <td><input type="checkbox" class="abnrml"></td>
    <td>10-15</td>
    <td>16-20</td>

  </tr>

</table>