Question

使用jQuery我想添加＆＃34;查询＆＃34;列到任何带有＆＃34; table＆＃34;的表的末尾。此列应包含一个电子邮件链接，其中包含基于其行中显示的信息的动态主题行。

我已经制作了一些jQuery，它完成了上面的一些操作，即它创建了新列和一个电子邮件链接，但我不知道如何使用变量来操作链接以包含那些行＆＃ 39;模块＆＃39;和＆＃39;日期＆＃39;领域。

表格

<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，如果您决定在以后添加更多行，则会更加健壮。

动态＆＃34;查询＆＃34;基于表行中的数据的链接

1 个答案: