Traversing Each table row and adding hyperlink to it

Question

My Table is getting dynamically generated through Jquery DataTable. Which looks something like this:

<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>

I want to traverse the whole table but only want to check 2nd or some other column value (consider this table to be quiet big, so I want to access by index). If its value corresponds to something, then I would like to add a hyperlink to the whole row which calls a Jquery function, where I can access all the values of that particular row.

I tried something like, It doesn't seem to be working. Any inputs appreciated.

$('#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. 
    } 
});

Btw. my rows can not have an anchor tag by default. Only based on value of certain column, it should have hyperlink.

Also how can I make sure, this traversing happens once the table is loaded, since the table is loaded via AJAX.

Answer 1

Well instead of traversing each table row separately you can take advantage of "createdRow" parameter of DataTable.

At the time of table creation you can check the values of the required column and assign the respective function as link to that row as below

Demo : https://jsfiddle.net/Prakash_Thete/xck2jys3/5/

Example taken for demonstration in 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);
}

Answer 2

You most likely want to use .append() or .prepend() methods of jQuery element:

// Iterating over <tr> elements, which are descendants of your table
$("#mySearchResultstr tr").each(function () {
    // $thisRow will contain a reference to a <tr> element
    // wrapped in jQuery Object
    var $thisRow = $(this);

    if (YOUR_CONDITION_HERE) {
        // Create new Link
        var $link = $("<a/>");
        $link.attr("href", YOUR_URL);
        $link.text("SOMETHING");

        // Use append or prepend, depends on where you want to insert the link
        $thisRow.append($link);
    }
});