表格中的行的背景颜色无法更改

Question

表格中的行的背景颜色无法更改

4

I am trying to select and highlight rows and columns in a table. I'm able to select columns but there is a problem with selection of rows. As, rows can be select and highlight with some color till one select a column after checking col-wise. Here is the snippet code -->

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>

步骤：

输入行数和列数
点击创建表格
默认情况下按行选择
可以通过在顶部选择按列选择来进行按列选择。
取消选中列后，行将不能被选择，它们的颜色也不能改变。但是在相同的情况下可以更改文本的颜色。

我在这里做错了什么？

- Rabinder Bisht

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bourbia Brahim · Accepted Answer

您的问题是在按列添加背景时，会覆盖蓝色颜色，因此如果已分配，则 tr 不会显示。

所以，在按行选择时，请删除 td 的背景，如下代码。

$('.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;
}

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