表格行的href上的onClick事件

Question

我创建了一个带有DataTables的表，并且每一行中的文档都被href'd并由本地JSON数据填充。

我有一个上下文菜单，其中一个选项是“打开文档”，这与单击href并以这种方式打开文档相同。

我试图获取将由onClick事件触发的属性（或正确的事情）。但是，由于表数据已集成到DataTables中，所以我不确定该如何进行。有什么想法吗？

渲染数据表：

<div class="side">
<ul class="nav">

    <li><--so when hovering over this li
        <i class="fas fa-calendar-alt fa-3x fa-alignment"></i> <-- this icon needs to be turned white
        <div class="tooltip">
            <span class="header">Activity</span>
            <ul class="tooltiptext">
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
            </ul>
        </div>
    </li>

        <li>
        <i class="fas fa-file-invoice-dollar fa-3x fa-alignment"></i>
        <div class="tooltip">
            <span class="header">Work</span>
            <ul class="tooltiptext">
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
            </ul>
        </div>
    </li>


        <li>
        <i class="fas fa-hand-holding-usd fa-3x fa-alignment"></i>
        <div class="tooltip">
            <span class="header">other</span>
            <ul class="tooltiptext">
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
            </ul>
        </div>
    </li>
</ul>
</div>

尝试通过上下文菜单onClick打开文档：

$('span.header').hover(function () {                                    
        $('.fa-alignment').closest('i').css("color", "white");

    });

HTML上下文菜单：

$('#km-table-id').DataTable( {
      columns: [
        // { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "Blank" },
        { data: "Titles" }
      ],
      columnDefs: [
        {
          data: "Path", 
          ordering:  true, targets: [2],
          render: function(data, type, row) { // ---- wraps docs in anchors
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [2]
        },
        { searchable: true, targets: [0], visible: false },
      ],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" },
      lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
      order: [],
      pageLength: 500,
      paging: true,
      pagingType: "full_numbers"
    });

Answer 1

更新：我找到了一个（有效的）解决方案。

基本上，“标题”的DataTable列必须位于最后一个位置，以与每个复选框正确对应。我确定有一种解决方案，可以在其后添加列，并且可以添加复选框，但是现在还可以。

$('#km-table-id').DataTable( {
      columns: [
        { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "Blank" },
        { data: "Titles" } // MUST be in last position to respond w/ checkboxes
      ],
      columnDefs: [
        {
          data: "Path", 
          ordering:  true, targets: [3],
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [3]
        },
        { searchable: true, targets: [1], visible: false },
      ],

...等