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

Question

I am trying to access the attribute/value of 'schoolidx' that is not hidden, when add button is clicked; however I am having hard time accessing it.

Can someone guide me please? I am trying to get only "1", or "2", or "3" depending on which one is not hidden ("display: none;"). In this case, "1".

Tried different methods:

        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

Instead of attempting to search by styling, perhaps you could add an 'active' class when you unhide a given row, and remove it when you hide it again.

You can then search using jQuery. var schoolid = $("tr.active").prop("schoolidx");

Have a look at addClass and removeClass . I assume you already have the ability to hide each row. Just add those two functions to that bit of code.

Answer 2

Note that I have changed your 'attribute' to a valid data attribute

For the JS, we have to make sure we're only selecting the tr 's within the tbody but not the first tr as thats where the add button is.

Then do an if() within an onclick to check to see if the display is set to none

<button> aren't self closing, they require a </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>