如何在单击另一个表时切换表行

时间:2013-12-14 14:06:36

标签: jquery toggle

嗯..我的英语很短......抱歉!

如您所见,此代码从DB获取一些数据并构建一个表:

.answer{display: none;}

<c:forEach var="quest" items="${list }">
    <c:if test="${quest.qkind==1 }" var="1">
        <tr class="queset">
            <th >${quest.no }</th>
            <td>${quest.question }</td>
        </tr>
        <tr class="answer ~~~~">
            <th></th>
            <td span="cols=2">${quest.contents }</td>
        </tr>
    </c:if>
</c:forEach>

当我点击类.queset的行时,我想用类.answer切换相应的隐藏行。

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:2)

我对您使用的服务器端语言非常不熟悉,因此可能无法按原样运行。

<c:forEach var="quest" items="${list }">
    <c:if test="${quest.qkind==1 }" var="1">
        <tr class="queset" data-question="${quest.no }">
            <th >${quest.no }</th>
            <td>${quest.question }</td>
        </tr>
        <tr class="answer" data-answer="${quest.no}">
            <th></th>
            <td span="cols=2">${quest.contents }</td>
        </tr>
    </c:if>
</c:forEach>

<强>的jQuery

$('.queset').click(function() {
    $('tr[data-answer="'+$(this).data('question')+'"]').toggle();
});

<强>演示

Check out a working demo (without server-sides scripting).