BB-коды таблиц для форума и быстрая конверсия таблиц
Добавлено: 10 дек 2018, 00:44
У меня форум достаточно технический и иногда требуется разместить таблицу в тело сообщения. Заворачивать ее в окошко code не так наглядно, как html разметка таблицы. Ну так все просто. Пишем в админке форума три парных бибикода, там уже есть образцы как это сделать, совершенно просто. Вот как у меня выглядит парный бибикод и его html замена полем ниже:
Вот такие парные бибикоды я сделал:
и соответствующие им парные теги html (можно прикрутить и оформление стилем к таблице) <table> </table>, <tr> </tr>, <td> </td>.
У меня в стиле для темы форума просто добавлено оформление примерно такое:
Чтобы пользователю было удобно переформатировать любую таблицу в бибикоды таблицы - пишем простенький скриптик и размещаем по ссылке.
Содержание скрипта собственно - разобрать табличку на массив и собрать обратно из массива с бибикодами, вот как собрать:
Ну например, мы имеем табличку:
1 2 3 4 5
apple mango banana limon orange
Обрабатываем скриптом по ссылке, получаем бибикод:
В теле сообщения форума этот бибикод будет выглядеть таблицей:
Хотите сменить в таблице колонки на строки - но проблем, короткий скрипт по ссылке поворачивает таблицу. Развернули, обработали в бибикод, получили результат:
Успешного программирования!
Код: Выделить всё
[table]{TEXT}[/table]
<table cellpadding="1" cellspacing="0" class="tablebbcode">{TEXT}</table>
[td]{TEXT}[/td]
<td class="tdbbcode">{TEXT}</td>Код: Выделить всё
[table] [/table], [tr] [/tr], [td] [/td]У меня в стиле для темы форума просто добавлено оформление примерно такое:
Код: Выделить всё
.tablebbcode {
border-color: #a9c2b8 !important;
border-left: 1px solid; !important;
border-right: 0px solid; !important;
border-top: 1px solid; !important;
border-bottom: 0px solid; !important;
background-color: #f4f4f4; !important;
margin: 5px 5px 5px 5px; !important;
}
.tdbbcode {
border-color: #a9c2b8 !important;
border-left: 0px solid; !important;
border-right: 1px solid; !important;
border-top: 0px solid; !important;
border-bottom: 1px solid; !important;
padding-left:6px; !important;
padding-right:6px; !important;
color:#466046; !important;
}Содержание скрипта собственно - разобрать табличку на массив и собрать обратно из массива с бибикодами, вот как собрать:
Код: Выделить всё
outtext = "[table]";
for (i=0; i<input_cols; i++) {
outtext += "[tr]";
for(j=0; j<input_array[0].length; j++) {
outtext += "[td]"+input_array[i][j] + "[/td]";
}
outtext += "[/tr]";
}//end for
outtext += "[/table]";1 2 3 4 5
apple mango banana limon orange
Обрабатываем скриптом по ссылке, получаем бибикод:
Код: Выделить всё
[table][tr][td]1[/td][td]2[/td][td]3[/td][td]4[/td][td]5[/td][/tr][tr][td]apple[/td][td]mango[/td][td]banana[/td][td]limon[/td][td]orange[/td][/tr][/table]| 1 | 2 | 3 | 4 | 5 |
| apple | mango | banana | limon | orange |
| 1 | apple |
| 2 | mango |
| 3 | banana |
| 4 | limon |
| 5 | orange |