2
我想选择并突出显示表格中的行和列。我可以选择列,但行选择存在问题。因为行可以选择并用某种颜色突出显示,直到在检查col_ wise后选择一列。 这里是代码段 - > 表格tr背景颜色不变
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>
步骤:
- 输入no。行和列的
- 点击默认在创建表
- 逐行选择
- 列明智的选择可以通过选择在顶部COL-明智来完成。
- 一旦取消选中col-wise,行不能被选中,其颜色也不能被改变。但是文字的颜色可以在相同的情况下改变。
我在这里做错了什么?
说真的,只有一条线和问题解决了.. :)但是,为什么它会覆盖那个? :( 谢谢 –
尝试打开控制台,并看到td的风格,它设置为背景颜色:白色或红色,所以tr会显示tds颜色,而蓝色只是tr颜色不是它的孩子:) –
哦,我明白了,我努力尝试,但无法弄清楚。感谢您的帮助... :) –