表 tr 背景颜色没有改变

Question

我正在尝试选择并突出显示表格中的行和列。我可以选择列，但选择行有问题。因为，可以选择行并用某种颜色突出显示，直到在检查 col-wise 后选择一列。 这是sn-p代码-->

var num_rows;
var num_cols;
var tid = "";
var tabindex = "";
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        createtable(num_rows, num_cols);
    });
});

function createtable(num_rows, num_cols) {
    var theader = "<table class='editableTable' id='editableTable'>";
    var tbody = "<tbody>";
    var temp = 1;
    for (var i = 1; i <= num_rows; i++) {
        tbody += "<tr id='row_id_" + i + "'>";
        for (var j = 1; j <= num_cols; j++) {
            tbody += "<td id='" + temp + "' tabindex=" + temp + ">";
            tbody += temp;
            tbody += "</td>";
            temp++;
        }
        tbody += "</tr>";
    }
    var tfooter = "</tbody></table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    $('.editableTable tr').css('background-color', 'white');
    var rows = $('.editableTable tr');
    $('.editableTable tr td').click(function() {
        if ($('#colornot').is(':checked')) {
        		$('.editableTable td').css('background-color', 'white');
            //rows.children().css('background-color', 'white');
            //var index = $(this).prevAll().length;
            //var index = $(this).parent().children().index($(this));
            var index = $(this).index();
            rows.find(':nth-child(' + (index + 1) + ')').css('background-color', 'red');
        } else {
            tid = $(this).parent().attr('id');
            //rows.children().css('background-color', 'white');
            $('.editableTable tr').css('background-color', 'white');
            //rows.children().removeClass('selected');
            //$(this).parents().find('[id='+tid+']').css('background-color', 'red');
            //$('#editableTable tr').find('[id='+tid+']').css('background-color', 'red');
            $('#'+tid).css('background-color', 'blue');
            //$('#'+tid).addClass('selected');
            //$('#'+tid).text('rohit');
            $('#row_num').text(tid);
        }
    });
}

.editableTable {
    border: solid 0px;
    width: 100%;
    text-align: center
}
.editableTable td {
    border: solid 0.5px;
    border-color: lightblue;
    width: 140px;
}
.selected {
    background-color: red;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="colornot"/>Col-wise<br>
Rows : <input type="text" name="rows" id="rows"/><br/>
Cols : <input type="text" name="cols" id="cols"/><br/>
<input type="button" value="Create Table!" id='createit' />
<div id="wrapper"></div>
<p id="row_num"></p>

步骤：

1. 输入编号。行数和列数
2. 点击创建表
3. 默认情况下按行选择
4. 可以通过选择顶部的col-wise来完成按列选择。
5. 一旦取消选中 col-wise 后，行将无法选择，其颜色也无法更改。但是在相同的情况下可以改变文本的颜色。

我在这里做错了什么？

Answer 1

您的问题是，在 Col-wise 中将背景添加到 td's 时，您会覆盖蓝色，因此无论是否分配了 tr 都不会显示

所以，当你像下面的代码那样按行选择时，删除 td 的背景

$('.editableTable tr td').attr('style',"");

查看下面的工作 sn-p ：

var num_rows;
var num_cols;
var tid = "";
var tabindex = "";
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        createtable(num_rows, num_cols);
    });
});

function createtable(num_rows, num_cols) {
    var theader = "<table class='editableTable' id='editableTable'>";
    var tbody = "<tbody>";
    var temp = 1;
    for (var i = 1; i <= num_rows; i++) {
        tbody += "<tr id='row_id_" + i + "'>";
        for (var j = 1; j <= num_cols; j++) {
            tbody += "<td id='" + temp + "' tabindex=" + temp + ">";
            tbody += temp;
            tbody += "</td>";
            temp++;
        }
        tbody += "</tr>";
    }
    var tfooter = "</tbody></table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    $('.editableTable tr').css('background-color', 'white');
    var rows = $('.editableTable tr');
    $('.editableTable tr td').click(function() {
        if ($('#colornot').is(':checked')) {
        		$('.editableTable td').css('background-color', 'white');
            //rows.children().css('background-color', 'white');
            //var index = $(this).prevAll().length;
            //var index = $(this).parent().children().index($(this));
            var index = $(this).index();
            rows.find(':nth-child(' + (index + 1) + ')').css('background-color', 'red');
        } else {
            console.log("blue");
            tid = $(this).parent().attr('id');
            //rows.children().css('background-color', 'white');
            $('.editableTable tr').css('background-color', 'white');
            $('.editableTable tr td').attr('style',"");
            //rows.children().removeClass('selected');
            //$(this).parents().find('[id='+tid+']').css('background-color', 'red');
            //$('#editableTable tr').find('[id='+tid+']').css('background-color', 'red');
            $('#'+tid).css('background-color', 'blue');
            //$('#'+tid).addClass('selected');
            //$('#'+tid).text('rohit');
            $('#row_num').text(tid);
        }
    });
}

.editableTable {
    border: solid 0px;
    width: 100%;
    text-align: center
}
.editableTable td {
    border: solid 0.5px;
    border-color: lightblue;
    width: 140px;
}
.selected {
    background-color: red;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="colornot"/>Col-wise<br>
Rows : <input type="text" name="rows" id="rows"/><br/>
Cols : <input type="text" name="cols" id="cols"/><br/>
<input type="button" value="Create Table!" id='createit' />
<div id="wrapper"></div>
<p id="row_num"></p>