При клике на кнопку менять дизайн
Хочу сделать 2 кнопки и в зависимости от того какая нажата, выводить определенный дизайн.
Но сложность в том, что сделать что бы просто добавляло класс не получается. Так как дизайн надо изменить ощутимо. Вот из чего что должно быть: <table id="table" width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td rowspan="2">4</td> <td rowspan="2">5</td> </tr> <tr> <td width="19%">6</td> <td width="41%">7</td> </tr></table>из этого в этот: <div id="div"> <div>2</div> <div>3</div> <div>1</div> <div>6</div> <div>7</div> <div>4</div> <div>5</div> </div> Ну и кнопки <input type="button" id="div1" onclick=""><input type="button" id="table1" onclick=""> Подскажите как лучше реализовать? |
Напиши 2 страницы.
Одной ставь display:none а другой block; <table id="table" width="100%" cellspacing="0" cellpadding="0" border="0" style="display:block"> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td rowspan="2">4</td> <td rowspan="2">5</td> </tr> <tr> <td width="19%">6</td> <td width="41%">7</td> </tr></table> <div id="div" style="display:none"> <div>2</div> <div>3</div> <div>1</div> <div>6</div> <div>7</div> <div>4</div> <div>5</div> </div> Предлагаю тебе сделать одну кнопку под названием <input value="Редизайн" type="button" id="button" onclick="reDesign();"> function reDesign(){ if (localStorage.getItem("design")==null || localStorage.getItem("design")==1){ localStorage.setItem("design", "2"); document.getElementById("table").style.display = "none"; document.getElementById("div").style.display = "block"; } else{ localStorage.setItem("design", "1"); document.getElementById("table").style.display = "block"; document.getElementById("div").style.display = "none"; } |
Цитата:
Что там у вас - таблица и ячейки? Для начала попробуйте нарисовать таблицу из дивов - чтобы понять как оно работает. Тогда как два пальца сможете превратить таблицу в блоки. |
А, понял, а при чем тут стили? У вас транспонирование массива, чистая переверстка. Ну попробуйте стилями саму таблицу транспонировать, то есть поменять местами строки и столбцы. А стилями - что делается стилями - меняется все что хочешь.
Без транспонирования все ячейки делаются блок и все. https://jsfiddle.net/9kc60hwn/ |
Часовой пояс GMT +3, время: 14:03. |