テーブルtr背景色が変更されない

Question

テーブルの行と列を選択して強調表示しようとしています。列を選択できますが、行の選択に問題があります。として、行を選択し、colワイズをチェックした後に、列を選択するまでいくつかの色で強調表示することができます。ここ は、スニペットのコードではありません - >

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. は何を入力します。行と列の
2. クリックして、上の
3. 列方向選択がCOLワイズ上部に選択することによって行うことができる、デフォルトで
4. 行方向選択があるテーブルを作成します。
5. col-wiseのチェックを外した後は、行を選択することはできず、色も変更できません。しかし、テキストの色は同じ状況で変更することができます。

私はここで間違っていますか？

Answer 1

あなたのproblemeは、あなたが選択しているときに、TDの背景を削除し、コルワイズあなたが青の色を上書きしているので、そのSoは

が割り当てられて天気をtrが示され文句を言わないでtd'sに背景を追加するときということです以下のコード

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