Table tr Background-Color is not changing

Question

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>

Steps:

1. Enter no. of rows and columns
2. Click on create table
3. Row-wise selection is by default
4. Column-wise selection can be done by selecting col-wise at top.
5. Once after un-check the col-wise, row cannot be selected and their color also cannot be changed. But the color of text can be changed in the same situation.

What am I doing wrong here ?

Answer 1

Your probleme is that when adding background to td's in Col-wise you're overwriting the blue color , so the tr wont be shown wether its been assigned

So , remove the td's background when you're selecting by rows as the below code

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

see the below working snippet :

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>