Question

我试图根据索引隐藏我的HTML表格的某些行，但是我收到错误：

TypeError：$ rows [0] .hide不是函数

我做错了什么？

HTML：

<tbody id="searchable">
        <c:forEach var="lot" items="${pageResult.entries}" varStatus="status">
            <tr title="<c:out value='${lot.description}'/>">
            <td><c:out value='${lot.nom}'/></td>
            <td><fmt:formatNumber value="${lot.id}" pattern="0000"/></td>
            <td><c:out value='${lot.priorite}'/></td>
            <td>
                <form:form class="actionForm" action="detail" method="POST">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action editer" value="Editer"/>
                </form:form>
                <form:form class="actionForm" action="supprimer" method="POST" onsubmit="return confirm('Confirmer la suppression?')">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action supprimer" value="Supprimer"/>
                </form:form>
            </td></tr>
        </c:forEach>
</tbody>

使用Javascript：

var $rows = $('#searchable tr');
$(document).ready(function(){
    $rows[0].hide();
});

Answer 1

$ rows.eq（0）而不是$ rows [0]

Answer 2

您可以使用eq()选择所需的项目：

给定一个表示一组DOM元素的jQuery对象，.eq（）方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在该集合中的位置。

＆＃13;

var $rows = $('#searchable tr');
$(document).ready(function() {
  $rows.eq(0).hide();
  console.log($rows[0])
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="searchable">
    <tr>
      <td>First Tr</td>
      <td>value1</td>
      <td>value2</td>
      <td>value3</td>
    </tr>
    <tr>
      <td>Second Tr</td>
      <td>value1.2</td>
      <td>value2.2</td>
      <td>value3.2</td>
    </tr>
  </tbody>
</table>

＆＃13;

为什么$rows[0]无效？

因为$()[index]为您提供了DOM元素// 检查代码段上的控制台;但是为了应用hide()事件，您需要eq()为您提供的Jquery对象。

有关详情，请参阅Get an element by index in jquery

Answer 3

使用以下

＆＃13;

$(document).ready(function(){
$("#searchable tr").eq(0).hide();

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="searchable">
        <c:forEach var="lot" items="${pageResult.entries}" varStatus="status">
            <tr title="<c:out value='${lot.description}'/>">
            <td><c:out value='${lot.nom}'/></td>
            <td><fmt:formatNumber value="${lot.id}" pattern="0000"/></td>
            <td><c:out value='${lot.priorite}'/></td>
            <td>
                <form:form class="actionForm" action="detail" method="POST">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action editer" value="Editer"/>
                </form:form>
                <form:form class="actionForm" action="supprimer" method="POST" onsubmit="return confirm('Confirmer la suppression?')">
                    <input type="hidden" name="lotId" value="<c:out value='${lot.nom}'/>"/>
                    <input type="submit" class="action supprimer" value="Supprimer"/>
                </form:form>
            </td></tr>
        </c:forEach>
</tbody>
  </table>

＆＃13;

如何通过索引隐藏HTML行？

3 个答案: