0

Я хочу скрыть блок на JavaScript-е который находится на таблице. Я создаю таблицу в цикле. Без цикла работала нормально но с циклом не работает.

мой код cshtml:

<script>
function text(idd){
    document.getElementById(idd).style.display=='none';
}
</script>
<header>
    <table>
        <thead>
        @{
            string id = "i"; //объявляю id
            foreach (List<string> row in Model.DataTable)
            {
                id += "i"; //обновляю id
                <tr onclick="text(id)">
                    @{
                        foreach (string cell in row)
                        {
                            <th style="background-color: #6c757d">@cell</th>
                        }
                    }
                </tr>
                <tr>
                    <th colspan="10">
                        <div id="@id" style="display: inline">
                            <p>какой то текст</p>
                        </div>
                    </th>
                </tr>
            }
        }
        </thead>
    </table>
</header>

html вывод:

<header>
        <table>
            <thead>
            <tr>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Отчество</th>
                <th>Дата рождения</th>
                <th>Телефон</th>
                <th>СоцСети</th>
                <th>Пол</th>
                <th>Статус</th>
                <th>Yandex</th>
                <th>Google</th>
            </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="ii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="iii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="iiii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
            </thead>
        </table>
    </header>

браузер выдаёт вот такую ошибку: "Uncaught TypeError: Cannot read property 'style' of null"

3
  • .style.display=='none' - почему ==? Добавьте в функцию text в начало строчку console.log(idd); и увидите, что туда на самом деле передается в консоли браузера. Дале в инспекторе браузера можно простомотреть, а есть ли на самом деле элемент с таким id. Судя по тексту ошибки - его нет.
    – aepot
    15 апр 2022 в 7:03
  • <tr onclick="text(@id)"> , а про == 'none' уже выше написали (должно быть так: document.getElementById(idd).style.display='none';)
    – Konst
    15 апр 2022 в 10:47
  • Спасибо вам. Вы очень помогли
    – IRF
    16 апр 2022 в 5:03

1 ответ 1

0

строка javaScript: idd.style.display='none'

1
  • 1
    Это действительно так, но более подробный ответ поможет проще понять ошибку. К примеру: В строке javaScript: idd.style.display=='none' стоит лишнее равно
    – Pashok
    16 апр 2022 в 5:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.