Question

我想对我遇到的问题提出一些意见。

我有一个页面，其中包含一个动态生成的表，其中包含五列和大量行。第一列字段包含标题，第五列字段包含一个url（其中一些是空的）。

我希望能够使用jquery：

每行

- 如果第五列字段包含网址 - 使用锚元素从第一个列字段中包装标题，并使用与href相同的第五列字段中的url。

这可能吗？非常感谢你提前。

渲染的html如下：

<table class="acf-dynamic-table ">
    <thead>
        <tr>
            <th>Film Title</th>
            <th>Credits</th>
            <th>Year</th>
            <th>Type</th>
            <th>Link to imdb</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Title 1</td>
            <td>Credit 1</td>
            <td>Year 1</td>
            <td>Type 1</td>
            <td>http://www.imdb.com/title/ttxxxx1/</td>
        </tr>
        <tr>
            <td>Title 2</td>
            <td>Credit 2</td>
            <td>Year 2</td>
            <td>Type 2</td>
            <td>http://www.imdb.com/title/ttxxxx2/</td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td>Credit 3</td>
            <td>Year 3</td>
            <td>Type 3</td>
            <td>http://www.imdb.com/title/ttxxxx3/</td>
        </tr>
        <tbody>
</table>

Answer 1

以这种方式：

＆＃13;

$('tr').each(function () {
    $(this).find('td:first').wrapInner(($.trim($(this).find('td:last').text()).length > 0 )? '<a href="' +$(this).find("td:last").text()+'"/>':'')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="acf-dynamic-table ">
    <thead>
        <tr>
            <th>Film Title</th>
            <th>Credits</th>
            <th>Year</th>
            <th>Type</th>
            <th>Link to imdb</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Title 1</td>
            <td>Credit 1</td>
            <td>Year 1</td>
            <td>Type 1</td>
            <td>http://www.imdb.com/title/ttxxxx1/</td>
        </tr>
        <tr>
            <td>Title 2</td>
            <td>Credit 2</td>
            <td>Year 2</td>
            <td>Type 2</td>
            <td>http://www.imdb.com/title/ttxxxx2/</td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td>Credit 3</td>
            <td>Year 3</td>
            <td>Type 3</td>
            <td></td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td>Credit 3</td>
            <td>Year 3</td>
            <td>Type 3</td>
            <td>http://www.imdb.com/title/ttxxxx3/</td>
        </tr>
        <tbody>
</table>

＆＃13;

Answer 2

是的，有可能，这是一个小提琴：http://jsfiddle.net/ysx9bd23/

$('.acf-dynamic-table tr').each(function(){
    var link = $(this).find('td:nth-of-type(5)').text();
    if(link){
        var title = $(this).find('td:nth-of-type(1)').text();
        $(this).find('td:nth-of-type(1)').html('<a href="'+ link +'">'+ title +'</a>')
    }
});

Answer 3

首先，选择过程可以做得更好。为什么要通过jquery中的精彩选择来达到每个tr或td的目的。

$(document).ready(function() {
  $("tbody>tr td:nth-child(5)").each(function() {
    if ($(this).text()) {
      $(this).closest("tr").find("td").first().wrap("<a href=" + $(this).text() + "><a/>");
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="acf-dynamic-table ">
  <thead>
    <tr>
      <th>Film Title</th>
      <th>Credits</th>
      <th>Year</th>
      <th>Type</th>
      <th>Link to imdb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td>Credit 1</td>
      <td>Year 1</td>
      <td>Type 1</td>
      <td>http://www.imdb.com/title/ttxxxx1/</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td>Credit 2</td>
      <td>Year 2</td>
      <td>Type 2</td>
      <td>http://www.imdb.com/title/ttxxxx2/</td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td>Credit 3</td>
      <td>Year 3</td>
      <td>Type 3</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 4

当然，使用这样的脚本：

$('.acf-dynamic-table tbody tr').each(function(index, element){
   var $ele = $(element),
       $first = $ele.find('td:first-child'),
       link = $ele.find('td:last-child').text(),
       title = $first.text();
    if(link){
        $first.html('<a href="'+link+'">'+title+'</a>');
    }
});

请参阅this working demo

HTH， -Ted

Answer 5

这是我对它的看法（对新程序员来说更详细）

        $(function(){
            /* for each row in the table (you may want to narrow it down
               further if you have multiple tables with the same class and 
               only want to apply this to a specific table
            */
            $(".acf-dynamic-table tbody tr").each(function( index, row ){
                var firstCol = $(row).find("td").first(); // first column
                var lastCol = $(row).find("td").last();   // last column
                var linkURL = lastCol.text(); 
                var linktitle = firstCol.text(); 

                // if the last column has text (URL) - create anchor tag
                if( linkURL && linkURL != '' ){
                    var anchor = $("<a>");
                    anchor.attr( "href", linkURL);
                    anchor.html( linktitle );
                    lastCol.html(anchor);
                }
            });
        });

<强> DEMO

使用表中一个字段的文本作为另一个字段中的链接

5 个答案: