javascript - 遍历每个表行并向其添加超链接

Question

我的表是通过 Jquery DataTable 动态生成的。看起来像这样:

<table id ="mySearchResults">
    <tr>
        <td>MyName</td>
        <td>MyPlace</td>
        <td>Status</td>
    <tr>
    <tr>
        <td>MyName1</td>
        <td>MyPlace1</td>
        <td>Status1</td>
    <tr>
</table>

我想遍历整个表，但只想检查第二列或其他一些列值(考虑到这个表非常大，所以我想通过索引访问)。如果它的值对应于某个东西，那么我想添加一个指向调用 Jquery 函数的整行的超链接，我可以在其中访问该特定行的所有值。

我试过类似的东西，它似乎不起作用。任何意见表示赞赏。

$('#mySearchResultstr').each(function() {
    var value = $(this).find('td 6').val();   //Consider 6 to 6th column
    if(value='abc'){                          //Check if it is abc
        $(this).parent.add                    //Not sure what function to call to add hyperlink to a local jquery function. 
    } 
});

顺便说一句。默认情况下，我的行不能有 anchor 标记。仅基于特定列的值，它应该具有超链接。

此外，由于表格是通过 AJAX 加载的，因此我如何才能确保在表格加载后发生这种遍历。

Answer 1

好吧，您可以利用 DataTable 的 "createdRow" 参数，而不是分别遍历每个表行。

在创建表时，您可以检查所需列的值并将相应的函数分配为该行的链接，如下所示

演示:https://jsfiddle.net/Prakash_Thete/xck2jys3/5/

在 Fiddle 中演示的示例:

//HTML
<table id="item" width="100%" cellspacing="0">
      <thead>
           <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
           </tr>
       </thead>
</table>


//JS

var tableData = [
        [   "Tiger Nixon",
            "61",
            "2011/04/25",
            "$320,800"
        ],
        [
           "Garrett Winters",
           "63",
           "2011/07/25",
           "$170,750"
        ],
       [
         "Ashton Cox",
         "66",
         "2009/01/12",
         "$86,000"
       ]
   ]; 

var itemTable = $("#item").DataTable({
     "data":tableData,
     "createdRow": function ( row, data, index ) {

       // you can check value of the any column you want 
       // I have checked the "age" column value
       if(data[1] > 62){
            $(row).attr("data-href", "greaterThanSixtyTwo");
       } else {
            $(row).attr("data-href", "lessThanSixtyTwo");
       }
    }
});   

//click event handler for row 
$('#item tbody').on( 'click', 'tr', function () {
    //fetch the row data
    var rowData = itemTable.row( this ).data();

    //fetch the function to be called on click of this row
    var functionToCall = $(this).data("href");

    //call the function with clicked rows data 
    eval( functionToCall + "( '"+rowData +"' )" );
});

function greaterThanSixtyTwo(rowData){
  console.log(" I am greater than Sixty Two - > : ", rowData);
}

function lessThanSixtyTwo(rowData){
  console.log("I am less than Sixty Two - > : ", rowData);
}