Question

我有一个动态创建表的函数。单击复选框时，如何更改列颜色。我的功能如下：

function addRow() {

    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    var table = document.getElementById("myTableData");
    var date = document.getElementById("date").value= Date();

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML = date;
    row.insertCell(1).innerHTML= myName.value;
    row.insertCell(2).innerHTML= age.value;
    row.insertCell(3).innerHTML= '<input type="checkbox" value = "check">';

Answer 1

最简单的方法是改变

row.insertCell(3).innerHTML= '<input type="checkbox" value = "check">';

到

row.insertCell(3).innerHTML= '<input type="checkbox" value = "check" onclick="this.parentNode.style.backgroundColor=\'#f00\';">';

刚刚添加了onclick属性，以便当用户点击此复选框时，它会将background-color更改为红色#f00

如果你想切换颜色

function toggleColor (  thisObj )
{
    var classes = thisObj.parentNode.classname;
    if ( classes.split(" ").indexOf( "blue-color" ) == -1 )
    {
       thisObj.parentNode.classname += " blue-color";
    }
    else
    {
      thisObj.parentNode.classname = classes.split( " blue-color" ).join( "" );
    }
}

将其作为

调用

row.insertCell(3).innerHTML= '<input type="checkbox" value = "check" onclick="toggleColor(this)">';

以及

.blue-color {
    background-color: blue; 
}

Answer 2

正如您标记了jquery

CSS

.blue-color {
    background-color: blue; 
}

JS

$(document).on("change", "input[type='checkbox']", function() {
    $(this).closest("td").toggleClass("blue-color");
});

供参考 - http://plnkr.co/edit/DStwkwvLIvGjr1bFjWIb?p=preview

Answer 3

确保加载了jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注册复选框的点击事件，如果点击复选框，则通过CSS更新包含<td>背景颜色：

 $("#myTableData").on('click', 'input[type=checkbox]', function(){

        $(this).closest('td').css("backgroundColor", "#fff");
        if($(this).is(":checked"))
        {
          $(this).closest('td').css("backgroundColor", "#aaa");
        }

    });

Answer 4

只需在复选框中添加onclick事件，然后调用函数即可更改所需列的背景颜色。像下面的东西

<input type="checkbox" value = "check" onclick="ChangeBackgroundColor(this)">

然后使用如下的简单函数来更改背景颜色

function ChangeBackgroundColor(status){
          if(status.checked =='true'){
            document.getElementById('name').style.backgroundColor = "#000000";
           document.getElementById('age').style.backgroundColor = "#000000";
           document.getElementById('date').style.backgroundColor = "#000000";
   } 
       else{
            //do nothing if not checked or change it to previous colors, whatever you want
          }

}

希望它有所帮助。

选中复选框时更改表格元素

4 个答案: