表格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')) { 
 
     \t \t $('.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. 輸入no。行和列的
2. 點擊默認在創建表
3. 逐行選擇
4. 列明智的選擇可以通過選擇在頂部COL-明智來完成。
5. 一旦取消選中col-wise，行不能被選中，其顏色也不能被改變。但是文字的顏色可以在相同的情況下改變。

我在這裏做錯了什麼？

Answer 1

你probleme的是，在添加背景到td's當上校，明智的你覆蓋的藍色，所以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')) { 
 
     \t \t $('.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>