关于表格td点击事件的监听

介绍

使用的表格为Datatable，记录下自己的代码，以后方便搬运。

功能：

1.获取表格点击行的所有数据；
2.点击除最后一列之外的其他列，实现颜色改变
3.第一列存在的 checkbox ，实现全选/反选（选中行都变色）
4.点击checkbox选中变色，点击checkbox以外的div部分变色（check实现选中）
5.实现附加行显示信息

---

这里是html代码（只有第一列）

//tr中的checkbox
"text-align:center;vertical-align:middel;">type="checkbox" class="visitors"  name="checkbox"  value = "' + data + '"/>

//th中的checkbox
type='checkbox' id="selectAll" className="checkboxs"/>

---

这里是js代码

//表格操作
$('#sampleTest').on('click', 'td:not(:last-child)', function(event) { //监听表单除最后一列的其他列

      //获取参数信息
      var table = $('#sampleTest').DataTable();
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      var visitor = row.data();
      var clickIndex = $(this).parents("tr").find("td").index($(this));
      var input;
      if (clickIndex != 0) { //选中除第一列和最后一列以外，tr变色，显示附加信息
        var str = '
' +
        ' 
备注:' + visitor.remarks + '
' + '

'; //tr变色，显示附加信息 if (row.child.isShown()) { row.child.hide(); tr.removeClass('shown'); } else { row.child(str).show(); tr.addClass('shown'); } //check选中 // input = $(this).parents("tr").find("input"); // if(input.prop("checked")){ // input.prop("checked", false); // }else{ // input.prop("checked", true); // } } else { //设置第一列 // checkbox选中 tr变色 input = $(this).children().children(); if ($(event.target).prop('type') == 'checkbox') { //点击checkbox if (!input.prop("checked")) { input.prop("checked", false); tr.css("background-color", "") } else { input.prop("checked", true); tr.css("background-color", "#FFFFE0") } } else { //点击checkbox以外部分 if (input.prop("checked")) { input.prop("checked", false); tr.css("background-color", "") } else { input.prop("checked", true); tr.css("background-color", "#FFFFE0") } } } //全选/反选 $('#selectAll').change(function(event) { let checked = event.target.checked; var input = $('input:checkbox[type="checkbox"]'); var tr = $(input).closest('tr'); if (input.prop("checked")) { input.prop("checked", false); tr.css("background-color", "") } else { input.prop("checked", true); tr.css("background-color", "#FFFFE0") } });