选中复选框时如何更改 table 行内输入文本的背景颜色

Question

我想更改包含在 table 行的 td 内的输入 text/textarea 的背景颜色，数据来自数据库，每一行都包含复选框，因此当单击该复选框时输入文本的背景颜色将改变。

$('#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

像这样？

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

Answer 2

试试这个代码它会解决你的问题

$('#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 3

使用 .toggleClass() 方法应用 class 其中包含 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 4

小心这里会弹出的一些答案，它们很脆弱（更改您的 html 可能会破坏您的代码）。

我推荐阅读：Decoupling Your HTML, CSS, and JavaScript。

您会立即意识到，如果有人决定换行您的文本区域，或将您的 table 更改为 <div> 因为他们想使用 bootstrap，您的代码没有更长的作品（脆弱的代码）。

相反，介绍一些 class描述您要执行的操作的元素：

.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 应用到您想要的活动 class。

Answer 5

你只需要更新你的脚本，当你选中相应的复选框时输入字段的背景颜色会改变，但输入字段必须有值否则颜色不会改变

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

选中复选框时如何更改 table 行内输入文本的背景颜色

How to change the background color of input text inside a table row when a checkbox is checked

jquery

html-table

tablerow