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

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

另外，我怎么能确定，一旦表被加载就会发生这种遍历，因为表是通过AJAX加载的。

Answer 1

您可以利用"createdRow"的{{1}}参数，而不是单独遍历每个表格行。

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

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

在小提琴中演示的示例：

DataTable

Answer 2

您最有可能想使用jQuery元素的.append()或.prepend()方法：

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

试试这个：

$(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>" );
        }

    })

})

最终代码：

＆＃13;

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

＆＃13;

Answer 4

描述

将点击事件委托给#btn
content是在#in1中输入的内容与#result <td>内容
url是在#in2
如果用户未输入网址，则为默认值将被使用：http://www.example.com
接下来，将搜索每个<td>以查看如果用户输入的任何内容匹配每个<td>
匹配的任何<td>都会有。{li>
包含在动态创建的文本锚将包括预定的 url（通过用户输入或默认参见＃3和＃4）。
✎在每个<td>我们都会做以下内容：
- 收集所有兄弟姐妹的名字 $sisters。
- 在$sisters上更改背景变黄。
- 找到父<tr>并分配它为$mom。
- 每个$mom都会获得id = "row" + idx。 idx对应<td>索引表中的位置（0零计数）。使用devtools检查<tr>到。{ 看看我在谈论什么。

✎在进一步阅读OP的请求后，我改进了我的答案，包括<tr>和兄弟<td>操纵。此外，默认的url功能已被禁用，请参阅＃4和source以获取详细信息。

参考

实施例

<强> PLUNKER

段

＆＃13;

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

＆＃13;

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

4 个答案:

描述

参考

实施例

段