При клике на кнопку менять дизайн

[djonA]

Хочу сделать 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="">

Подскажите как лучше реализовать?

[Leon-on12]

Напиши 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";
}

[kostyanet]

Но сложность в том, что сделать что бы просто добавляло класс не получается.

Это противоречит концепции css. Одним доп-классом можно поменять все, что не потребует переверстки.

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

[kostyanet]

А, понял, а при чем тут стили? У вас транспонирование массива, чистая переверстка. Ну попробуйте стилями саму таблицу транспонировать, то есть поменять местами строки и столбцы. А стилями - что делается стилями - меняется все что хочешь.

Без транспонирования все ячейки делаются блок и все. https://jsfiddle.net/9kc60hwn/