动态 "enquiry" link 基于 table 行中的数据

Question

使用 jQuery 我想在 class "table" 的任何 table 的末尾添加一个 "Enquiry" 列。此列应包含一封电子邮件 link，其中包含基于其行中显示的信息的动态主题行。

我做了一些 jQuery 完成了上面的一些工作，即它创建了新列和一封电子邮件 link，但我不知道如何使用变量来操作link 以包含行 'Module' 和 'Date' 字段。

Table

<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 稍微整理了代码，如果您决定在以后添加更多行，它会更强大。

动态 "enquiry" link 基于 table 行中的数据

Dynamic "enquiry" link based on data in table row

jquery

var

html-table