HTML Свернуть строки таблицы - PullRequest
Новая
       27

HTML Свернуть строки таблицы

0 голосов
/ 20 марта 2020

Я довольно новичок в нокауте и унаследовал некоторый устаревший код для моего приложения. У меня есть таблица, в которой есть данные из функции выбивки. Вне этой таблицы находится еще один div (вложенный в этот div), в котором есть еще одна таблица, снова связанная нокаутом js. Я хочу, чтобы кнопка в основной таблице каждой строки и флажок. кнопка должна иметь изображение при свертывании и другое изображение при расширении. при свертывании должна скрываться вторая таблица, а при развертывании должна отображаться таблица. пожалуйста, направьте меня на что-то подобное или ресурс

спасибо. 

<table class="table">
        <thead>
            <tr>
                <th> </th>
                <th ><input name="select_all" value="1" type="checkbox" /></th>
                <th >Name</th>
            </tr>
        </thead>
    </table>
<div data-bind="visible: TestNames().length">
            <div class="closed" id="list" data-bind="foreach: TestNames()">
                <div class="header">
                    <table class="table">                        
                        <tbody>
                            <tr>
                                <td ><button >+</button></td>
                                <td >
                                    <input type='checkbox'>
                                </td>
                                <td style="margin-left:120px" data-bind="text: TestName"></td>
                            </tr>
                        </tbody>
                    </table>                   
                </div>
                <div class="detail" id="detail" >
                    <table  class="table">
                        <thead>
                            <tr>
                                <th class="name">Name</th>
                                <th class="number">Number</th>
                                <th class="synonym">Synonym</th>
                            </tr>
                        </thead>
                        <tbody id="testList" data-bind="foreach: ListTests">
                            <tr >
                                <td class="name">

                                </td>
                                <td class="number" data-bind="text: Number"></td>
                                <td class="synonym" data-bind="text: synonym"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

в приведенном выше коде я хочу развернуть и свернуть div с id = detail при нажатии «+» с помощью knockout / javascript / jquery.

...