Question

我有一个包含数据列（名称，年龄，电子邮件）的表格，我有一个隐藏的模态窗口，只有当用户点击每行旁边的“详细信息”时才会显示。

需要在模态中填充的数据位于隐藏的span标记中，其中包含hide-name等类。

HTML：

<tr class="xrow row-2">
<td>Fisher, Baker</td>
<td>2 notes</td>
<td><a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a></td>
<span class="hide hidden-name">Fisher, Baker</span>
<span class="hide hidden-date">2014-03-20</span>
<span class="hide hidden-time">14:00:00</span>
</tr>

这是我使用的JS，但是当我调用name变量时它什么也没有返回。

$('.xrow').on("click", '.btn-review', function () {
    var name = $(this).closest('span.hidden-name').text();
    // alert(name);
}

Answer 1

代码中的

this引用.btn-review元素而不是tr，您应该首先选择最接近的tr元素：

var name = $(this).closest('tr').find('span.hidden-name').text();

编辑：您的标记无效，tr元素只能包含td子元素，您应该使用td元素包装span元素，浏览器将以不同方式呈现此标记。更改标记后，上述代码段应该可以正常工作。

我建议将span移动到包含该按钮的td元素，然后使用$(this).siblings('span.hidden-name').text()，这比使用closest更有效，然后find。

<tr class="xrow row-2">
    <td>Fisher, Baker</td>
    <td>2 notes</td>
    <td>
       <a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a>
       <span class="hide hidden-name">Fisher, Baker</span>
       <span class="hide hidden-date">2014-03-20</span>
       <span class="hide hidden-time">14:00:00</span>
    </td>
</tr>

Answer 2

我想我已经想到了你想要的东西：

$('.xrow').click(function () {
    var name = $(this).find('span.hidden-name').text();
})

您只需在所单击元素的内容中搜索所需元素即可。

Answer 3

你应该用任何td包裹你的跨度。例如，最后一次。

<td>
<a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a>

<span class="hide hidden-name">Fisher, Baker</span>
<span class="hide hidden-date">2014-03-20</span>
<span class="hide hidden-time">14:00:00</span>
</td>

您可以通过以下方式与我们联系：

$('.xrow').on("click", '.btn-review', function () {
    var name = $(this).parents('.xrow').find('span.hidden-name').text();
    alert(name);
});

http://jsfiddle.net/V4z8S/2/

获取隐藏span标记的文本值

3 个答案: