Question

单击添加按钮时，我试图访问未隐藏的'schoolidx'的属性/值；但是我很难访问它。

有人可以引导我吗？我试图只获得“ 1”，“ 2”或“ 3”，具体取决于哪一个未被隐藏（“ display：none;”）。在这种情况下，为“ 1”。

尝试了不同的方法：

        let schoolIndex = $('#schoolTableBody > tr:not([style*="display: none"])').attr("schoolidx"),
            schoolIndex2 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
            schoolIndex3 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
            schoolIndex4 = $("#schoolTableBody > tr:visible")


<table class="table table-striped table-hover table-condensed" id="schoolTable">
    <thead>
        <tr>
        <th> </th>
        <th>School Name</th>
        <th>Country</th>
    </tr>
</thead>
<tbody id="schoolTableBody">
    <tr class="school-row" style="">
        <td><button id="addSchoolBtn" title="Add" style="width:50px"/></td>
        <td><input type="text" name="sName" id="sName"></td>
        <td><input type="text" name="Country" id="Country"></td>
    </tr>
    <tr schoolidx="1" style="">
        <td> </td>
        <td><input type="hidden" name="sName" value="SK">SK</td>
        <td><input type="hidden" name="Country" value="US">US</td>
    </tr>
    <tr schoolidx="1" style="">
        <td> </td>
        <td><input type="hidden" name="sName" value="JS">JS</td>
        <td><input type="hidden" name="Country" value="US">US</td>
    </tr>
    <tr schoolidx="2" style="display: none;">
        <td> </td>
        <td><input type="hidden" name="sName" value="CAS">CAS</td>
        <td><input type="hidden" name="Country" value="CA">CA</td>
    </tr>
    <tr schoolidx="2" style="display: none;">
        <td> </td>
        <td><input type="hidden" name="sName" value="AM">AM</td>
        <td><input type="hidden" name="Country" value="CA">CA</td>
    </tr>
    <tr schoolidx="3" style="display: none;">
        <td> </td>
        <td><input type="hidden" name="sName" value="BAS">BAS</td>
        <td><input type="hidden" name="Country" value="BR">BR</td>
        </tr>
</tbody>
</table>

Answer 1

您可以取消隐藏给定的行而添加“活动”类，而不是尝试通过样式进行搜索，而当再次隐藏该行时可以将其删除。

然后可以使用jQuery搜索。 var schoolid = $("tr.active").prop("schoolidx");

看看addClass和removeClass。我假设您已经可以隐藏每一行。只需将这两个函数添加到那段代码中即可。

Answer 2

请注意，我已将您的“属性”更改为有效的data attribute

对于JS，我们必须确保只选择tr中的tbody，而不是第一个tr，因为那是添加按钮在哪里。

然后在if()内进行onclick来检查display是否设置为none

<button>不是自动关闭的，它们需要</button>

document.getElementById('addSchoolBtn').addEventListener('click', () => {
  document.querySelectorAll('#schoolTableBody tr:not(.school-row)').forEach(tr => {
    if (tr.style.display !== "none") alert(tr.dataset.schoolidx)
  })
})

<table class="table table-striped table-hover table-condensed" id="schoolTable">
  <thead>
    <tr>
      <th> </th>
      <th>School Name</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody id="schoolTableBody">
    <tr class="school-row" style="">
      <td><button id="addSchoolBtn" title="Add" style="width:50px">Add</button></td>
      <td><input type="text" name="sName" id="sName"></td>
      <td><input type="text" name="Country" id="Country"></td>
    </tr>
    <tr data-schoolidx="1" style="">
      <td> </td>
      <td><input type="hidden" name="sName" value="SK">SK</td>
      <td><input type="hidden" name="Country" value="US">US</td>
    </tr>
    <tr data-schoolidx="1" style="">
      <td> </td>
      <td><input type="hidden" name="sName" value="JS">JS</td>
      <td><input type="hidden" name="Country" value="US">US</td>
    </tr>
    <tr data-schoolidx="2" style="display: none;">
      <td> </td>
      <td><input type="hidden" name="sName" value="CAS">CAS</td>
      <td><input type="hidden" name="Country" value="CA">CA</td>
    </tr>
    <tr data-schoolidx="2" style="display: none;">
      <td> </td>
      <td><input type="hidden" name="sName" value="AM">AM</td>
      <td><input type="hidden" name="Country" value="CA">CA</td>
    </tr>
    <tr data-schoolidx="3" style="display: none;">
      <td> </td>
      <td><input type="hidden" name="sName" value="BAS">BAS</td>
      <td><input type="hidden" name="Country" value="BR">BR</td>
    </tr>
  </tbody>

如何访问不显示的元素属性？

2 个答案: