表 tr 背景颜色没有改变

Question

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

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. 一旦取消选中列后，就无法选择行，也无法更改其颜色。但在同样的情况下，文本的颜色是可以改变的。

我在这里做错了什么？

Answer 1

你的问题是，当td's在 Col-wise 中添加背景时，你会覆盖蓝色，所以 tr 不会显示，无论它是否被分配

因此，当您按行选择时，请删除 td 的背景，如下代码所示

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

请参阅下面的工作片段：

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

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