jquery - 基于表行中的数据的动态 "enquiry"链接

Question

使用 jQuery，我想在任何具有“table”类的表的末尾添加一个“Enquiry”列。此列应包含一个电子邮件链接，其中包含基于其行中显示的信息的动态主题行。

我已经制作了一些 jQuery 来完成上述一些操作，即它创建新列和电子邮件链接，但我不知道如何使用变量来操作链接以包含该行“模块”和“日期”字段。

表格

<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Module</th>
            <th>Price</th>
            <th>Venue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jan 01</td>
            <td>Module 1 – Example</td>
            <td>£100 (+ VAT)</td>
            <td>Example location, Example City</td>
        </tr>
        <tr>
            <td>Jan 01</td>
            <td>Module 2 – Example</td>
            <td>£100 (+ VAT)</td>
            <td>Example location, Example City</td>
        </tr>
    </tbody>
</table>

我不完整的 jQuery

$('table.table').find('tr').each(function(){
    $(this).find('th').eq(3).after('<th>Enquire</th>');
    $(this).find('td').eq(3).after('<td><a class="mailenquiry" href="mailto:foo@foo.co.uk?subject=Enquiry about MODULE HERE on DATE HERE">Enquire</a></td>');
});

Fiddle

Answer 1

您可以将 :eq 选择器与 text() 结合使用来查找行中给定 td 的文本，然后将其附加到 HTML。试试这个:

$('table.table tr').each(function() {
    var $row = $(this);
    var date = $row.find('td:eq(0)').text();
    var module = $row.find('td:eq(1)').text();
    $row.find('th:last').after('<th>Enquire</th>');
    $row.find('td:last').after('<td><a class="mailenquiry" href="mailto:foo@foo.co.uk?subject=Enquiry about ' + module + ' on ' + date + '">Enquire</a></td>');
});

Updated fiddle

我还通过加入一些选择器、缓存 tr 元素并使用 :last 来整理代码，如果您决定在以下位置添加更多行，这会更加健壮:稍后的日期。