Удаление и скрытие содержимого строк таблицы после запроса sql работает только для первой строки на asp

Question

У меня есть таблица базы данных, которая называется "Полеты". На странице ASP я делаю запрос MySQL и хочу поместить результаты в таблицу. Я пытаюсь сделать строки кликабельными для получения дополнительной информации. Вот мой код ..

<style>

    .dropbtn {

    color: white;
    border: none;
    cursor: pointer;
    }


    .dropdown {
    position: relative;
    }

    .dropdown-content {
    display: none;
    position: relative;
    overflow: auto;
    z-index: 1;
    }

    .dropdown-content a {
    padding: 4px 16px;
    text-decoration: none;
    display: block;
    }


    .show {display:block;}
</style>

Это запрос ...

<%
Set records = Server.CreateObject("ADODB.Recordset")
records.open "SELECT * from flights WHERE flighttype='S' LIMIT 5 ",conn
%>

А вот часть, которая создает l oop и таблицу ...

<table class="grid">
<tr class="capt alnl clrb">
<td>ID</td>
<td>Aircraft</td>
<td>Flight</td>
</tr>           
<%
while not records.eof 
%>
    <tr id="bdshow" onclick="openclose()" class="seq<%=no mod 2%> dropbtn">
    <td class="clrg"><%=records("idflights")%></td>
    <td class="clrg"><%=records("aircraftCode")%></td>
    <td class="clrg">Flight <%=records("flightNo")%></td>
    </tr>
    <tr id="myDropdown" class="dropdown-content">
        <td colspan="3" class="alnc clrb fntb">
        <%=records("datearrival")%>
        </td>
    </tr>
<%
    records.moveNext
wend
records.close
%>
</table>

И, наконец, это сценарий ...

<script>
function openclose()
    {
    document.getElementById("myDropdown").classList.toggle("show");
    var elem = document.getElementById("bdshow");

    }
</script>

Это приводит меня к таблице просто отлично, но когда я нажимаю на любую строку, только первая строка приносит вторую строку , Вы нажимаете на 5-ую строку, но первая строка опускается вместе с данными первой записи. Что мне делать?

Answer 1

Ну, главная проблема в том, что вы используете идентификационную метку "myDropDown" для всех строк раскрывающегося содержимого. Атрибут "id" в HTML должен быть уникальным для всего документа - и у вас одинаковая идентификационная метка во всех строках. Естественно, только первый «берет», а все остальные игнорируются.

То, что вы хотели бы сделать, - это иметь уникальный id для каждого раскрывающегося списка, передать его нажмите на кнопку и используйте ее, чтобы найти правильный раскрывающийся список в функции. К счастью, у вас, вероятно, уже есть полезный идентификационный номер: если в вашей таблице есть столбец идентификатора строки, как это принято, то вы можете просто использовать его.

В приведенном ниже примере я собираюсь предположить, что ваше числовое c auto_increment поле идентификатора строки называется id, поэтому ваш обновленный ASP может выглядеть следующим образом:

<table class="grid">
<tr class="capt alnl clrb">
<td>ID</td>
<td>Aircraft</td>
<td>Flight</td>
</tr>           
<%
while not records.eof 
%>
    <tr id="bdshow" onclick="openclose(<%=records("id")%>)" class="seq<%=no mod 2%> dropbtn">
    <td class="clrg"><%=records("idflights")%></td>
    <td class="clrg"><%=records("aircraftCode")%></td>
    <td class="clrg">Flight <%=records("flightNo")%></td>
    </tr>
    <tr id="myDropdown-<%=records("id")%>" class="dropdown-content">
        <td colspan="3" class="alnc clrb fntb">
        <%=records("datearrival")%>
        </td>
    </tr>
<%
    records.moveNext
wend

, и сценарий должен будет взять эту цифру c id и использовать ее следующим образом:

function openclose(rowid)
    {
    document.getElementById("myDropdown-"+rowid).classList.toggle("show");
    var elem = document.getElementById("bdshow");

    }

Answer 2

Ааа .. и теперь у меня есть другая проблема, в таблице есть 3 столбца (показано на фото), но когда я опускаю вторую строку, это позволяет мне создать только один столбец, colspan не влияет на отброшенный линия ..