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

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);
    }
});

Answer 3

Try this :

$(document).ready(function() {

    $("tr").each(function(){

        var href = "yourHref";
        var name = "your name";

        var value  = $("td",this).eq(5).text();

        if(value == 'abc') {
            $(this).html("<td colspan=6><a href=" + href + ">" + name + "</a></td>" );
        }

    })

})

Final code :

 <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <table border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>abc</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>abc</td></tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function() { $("tr").each(function(){ var href = "yourHref"; var name = "your name"; var value = $("td",this).eq(5).text(); if(value == 'abc') { $(this).html("<td colspan=6><a href=" + href + ">" + name + "</a></td>" ); } }) }) </script> </body> </html> 

Answer 4

Description

1. Delegate click event to #btn
2. content is whatever is entered in #in1 To be matched with #result 's <td> content

3. url is an address entered in #in2

4. If user did not enter a url, the default will be used: http://www.example.com

5. Next, each <td> will be searched to see if any content entered by user is matched with the content of each <td>

6. Any <td> that is matched, will have it's text wrapped in a dynamically created anchor which will include a predetermined url (by user input or default see #3 and #4).

7. ✎ On each <td> we will do the following:

   • Collect all siblings name them $sisters .
   • On $sisters change the background to yellow.
   • Find parent <tr> and assign it as $mom .
   • Each $mom will get an id = "row" + idx . idx corresponds to <td> index position within the table (0 zero count). Use devtools to inspect the <tr> to see what I'm talking about.

✎ Upon further reading of OP's request I have improved my answer to include <tr> and sibling <td> manipulation. Also, the default url function has been disabled see #4 and source for details.

---

References

• wrapInner()
• siblings()
• parent()

---

Examples

PLUNKER

SNIPPET

 <!DOCTYPE html> <html> <head> <style> body { font: 400 16px/1.428 Consolas; } #results { border: 2px solid grey; } td { border: 1px solid black; padding: 5px; } a { color: yellow; background: #000; display: inline; transition: all 1s; text-decoration: none; } a:hover { color: #000; background: yellow; display: block; transition: all 1s; text-decoration: underline; } </style> </head> <body> <fieldset> <legend>Query Content</legend> <input id='in1' type='search' placeholder='LOC5' search='5'> <button id='btn1'>Search</button> <input id='in2' placeholder='http://google.com'> <br/> <small>Search function is case-sensitive</small> </fieldset> <table id="results"> <tr> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> </tr> <tr> <td>NAME3</td> <td>LOC3</td> <td>STATUS3</td> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> </tr> <tr> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> </tr> <tr> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> </tr> <tr> <td>NAME3</td> <td>LOC3</td> <td>STATUS3</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> </tr> <tr> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> <td>NAME3</td> <td>LOC3</td> <td>STATUS3</td> </tr> <tr> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> </tr> <tr> <td>NAME2</td> <td>LOC2</td> <td>STATUS2</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME3</td> <td>LOC3</td> <td>STATUS3</td> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> </tr> <tr> <td>NAME4</td> <td>LOC4</td> <td>STATUS4</td> <td>NAME1</td> <td>LOC1</td> <td>STATUS1</td> </tr> <tr> <td>NAME5</td> <td>LOC5</td> <td>STATUS5</td> <td>NAME3</td> <td>LOC3</td> <td>STATUS3</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script> /* | 1. Delegate click event to #btn | 2. content is whatever is entered in #in1 | To be matched with #result's <td> content | 3. url is an address entered in #in2 | 4.✎ If user did not enter a url, the default | will be used: http://www.example.com | 5. Next, each <td> will be searched to see | if any content entered by user is matched | with the content of each <td> | 6. Any <td> that is matched, will have it's | text wrapped in a dynamically created | anchor which will include a predetermined | url (by user input or default see #3 and #4 */ $('#btn1').on('click', function() { var content = $('#in1').val(); var url = $('#in2').val(); /* Uncomment if default url is desired if (url === 'undefined' || url === null || url === '') { url = 'http://www.example.com'; } */ /* | 7. On each `<td>` we will do the | following: | a. Collect all siblings name them | $sisters. | b. On $sisters change the background | to yellow. | c. Find parent `<tr>` and assign it | as $mom. | d. Each $mom will get an id='row'+idx. | idx corresponds to `<td>` index | position within the table (0 zero count). | Use devtools to inspect the `<tr>` to | see what I'm talking about. */ $('td').each(function(idx) { var $sisters = $(this).siblings(); var $mom = $(this).parent(); if ($(this).text() === content) { $(this).wrapInner('<a href="' + url + '"></a>'); $sisters.css('background', 'yellow'); $mom.each(function() { $(this).attr('id', 'row' + idx); }); } }); }); </script> </body> </html>