$(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"); }) } })
效果图
jQuery 表格点击单元格 行和列加亮
猜你喜欢
转载自www.cnblogs.com/yangjun806/p/12606280.html
今日推荐
周排行