$(document).ready(function () {
//给表table 设置class="MyTable"
/*以下是class名称 请用下面的名称自定义样式
SelectTr:选中的tr行
SelectTd :选中的td单元格
SelectTd2:选中的td竖列
*/
var selecttr //选中的tr
var selecttd //选中的td
var cellindex //选中的单元格td序号
// var rowindex
$(".MyTable tr").click(function () {//点击tr 设置tr的 Class
if (selecttr != null) { selecttr.removeClass("SelectTr") }
$(this).addClass("SelectTr");
selecttr = $(this);
// rowindex = this.rowIndex;
})
$(".MyTable td").click(function () {//点击td 设置td的class
if (selecttd != null) { $(selecttd).removeClass("SelectTd") }
$(this).addClass("SelectTd");
selecttd = this;
setcolumn(this.cellIndex)
cellindex = this.cellIndex;
})
//设置竖列样式
function setcolumn(newcellindex) {
$(".MyTable tr").each(function () {
var td1 = $(this).children("td")[cellindex]
$(td1).removeClass("SelectTd2");
var td2 = $(this).children("td")[newcellindex]
$(td2).addClass("SelectTd2");
})
}
})
效果图
![]()