| |
|
|
| | Не судите строго. Код не совсем рационален, но, думаю JavaScript потерпит. Сразу оговорюсь, почему постю в PHP раздел, а не в JavaScript: дело в том что многие заказчики требуют наличие модуля формирования таблиц, который фаще всего им очень хочется юзать на подобие bbCode.
Допущения: материнское окно содержит текстовое поле (document.msgfrm.msg)
<html>
<head>
<title>Формирование таблицы: Шаг 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/scode.css" rel="stylesheet" type="text/css">
<script>
<!--
function toStep2(){
rows = document.addts.rows.value;
cols = document.addts.cols.value;
spacing = document.addts.cellspacing.value;
padding = document.addts.cellpadding.value;
border = document.addts.border.value;
bgcolor = document.addts.bgcolor.value;
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<title>Формирование таблицы: Шаг 1</title>');
document.writeln('<link href="../css/style.css" rel="stylesheet" type="text/css">');
document.writeln('<link href="../css/scode.css" rel="stylesheet" type="text/css">');
document.writeln('<script>');
document.writeln(' function generate(){');
document.writeln(' rows = '+rows+';');
document.writeln(' cols = '+cols+';');
document.writeln(' spacing = '+spacing+';');
document.writeln(' padding = '+padding+';');
document.writeln(' border = '+border+';');
document.writeln(' bgcolor = \''+bgcolor+'\';');
document.writeln('');
document.writeln(' htmlcode=\'<table border="'+border+'" cellspacing="'+spacing+'" cellpadding="'+padding+'" bgcolor="'+bgcolor+'">\';');
document.writeln(' c=0;');
document.writeln(' for (i=0; i<rows; i++){');
document.writeln(' htmlcode=htmlcode+\'<tr>\';');
document.writeln(' for (j=0; j<cols; j++){');
document.writeln(' htmlcode=htmlcode+\'<td>\'+document.getElementById(c).value+\'</td>\';');
document.writeln(' c++;');
document.writeln(' }');
document.writeln(' htmlcode=htmlcode+\'</tr>\';');
document.writeln(' }');
document.writeln(' htmlcode=htmlcode+\'</table>\';');
document.writeln(' window.opener.msgfrm.msg.value=window.opener.msgfrm.msg.value+htmlcode;');
document.writeln(' window.close();');
document.writeln(' }');
document.writeln('</script>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<body topmargin="3" leftmargin="0" bottommargin="0" rightmargin="0" bgcolor="#FAFAFA">');
document.writeln('<center><span class="label">Таблица</span></center>');
document.writeln('<hr>');
document.writeln('<form name="addts">');
document.writeln('<table width="100%" border="0" cellspacing="0" cellpadding="3">');
document.writeln('<tr>');
document.writeln('<td width="70" bgcolor="#CCCCCC" nowrap align="center" valign="middle" class="label">Шаг 2</td>');
document.writeln('<td width="100%"></td>');
document.writeln('</tr>');
document.writeln('<tr>');
document.writeln('<td colspan="2" align="center">');
document.writeln('<table border="'+border+'" cellspacing="'+spacing+'" cellpadding="'+padding+'" bgcolor="'+bgcolor+'">');
ct=0;
for (i=0; i<rows; i++){
document.writeln('<tr>');
for (j=0; j<cols; j++){
document.writeln('<td><input type="text" size="15" id="'+ct+'"></td>');
ct++;
}
document.writeln('</tr>');
}
document.writeln('</table>');
document.writeln('</td>');
document.writeln('</tr>');
document.writeln('<tr>');
document.writeln('<td colspan="2" align="center">');
document.writeln('<input type="button" value="<< Назад" OnClick="javascript:history.go(-1)" class="btn_otxt">');
document.write('<input type="button" value="Сформировать таблицу" OnClick="javascript:generate();" class="btn_otxt">');
document.writeln('</td>');
document.writeln('</tr>');
document.writeln('</table>');
document.writeln('</form>');
document.writeln('</body>');
document.writeln('</html>');
}
//-->
</script>
</head>
<body topmargin="3" leftmargin="0" bottommargin="0" rightmargin="0" bgcolor="#FAFAFA">
<center><span class="label">Таблица</span></center>
<hr>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="70" bgcolor="#CCCCCC" nowrap align="center" valign="middle" class="label">Шаг
1</td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="2">
<form name="addts" method="post" action="javascript:toStep2();">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="100%" valign="middle" class="smpltxt">Строки</td>
<td width="100" nowrap>
<input type="text" name="rows" class="inputtext" value="1">
</td>
</tr>
<tr bgcolor="#EDEDED">
<td valign="middle" class="smpltxt">Столбцы</td>
<td>
<input type="text" name="cols" class="inputtext" value="1">
</td>
</tr>
<tr>
<td valign="middle"class="smpltxt">Промежуток между ячейками</td>
<td>
<input type="text" name="cellspacing" class="inputtext" value="0">
</td>
</tr>
<tr bgcolor="#EDEDED">
<td valign="middle" class="smpltxt">Отступ от краёв внутри ячейки</td>
<td>
<input type="text" name="cellpadding" class="inputtext" value="0">
</td>
</tr>
<tr>
<td valign="middle" class="smpltxt">Толщина границы таблицы</td>
<td>
<input type="text" name="border" class="inputtext" value="0">
</td>
</tr>
<tr bgcolor="#EDEDED">
<td valign="middle" class="smpltxt">Цвет фона таблицы</td>
<td>
<select id="bgcolor" class="inputtext">
<option value="#FFFFFF">По умолчанию</option>
<option style="color:darkred;" value="darkred">Тёмно-красный</option>
<option style="color:red;" value="red">Красный</option>
<option style="color:orange;" value="orange">Оранжевый</option>
<option style="color:brown;" value="brown">Коричневый</option>
<option style="color:yellow;" value="yellow">Жёлтый</option>
<option style="color:green;" value="green">Зелёный</option>
<option style="color:olive;" value="olive">Оливковый</option>
<option style="color:cyan;" value="cyan">Голубой</option>
<option style="color:blue;" value="blue">Синий</option>
<option style="color:darkblue;" value="darkblue">Тёмно-синий</option>
<option style="color:indigo;" value="indigo">Индиго</option>
<option style="color:violet;" value="violet">Фиолетовый</option>
<option style="color:white;" value="white">Белый</option>
<option style="color:black;" value="black">Чёрный</option>
</select>
</td>
</tr>
<tr align="right">
<td valign="bottom" colspan="2">
<input type="Submit" name="Submit" value="к Шагу 2 >>" class="btn_otxt">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
|
Описание работы: кликаем что-то там, что, сами придумаете (кнопка, ссылка, не важно). Открывается новое окошко с файлом, содержание которого выше.
В нём указываем параметры таблицы: строки, столбцы, цвет фона, паддинг, спэйсинг, цвет бэкграунда. Указали, гликаем дальше. Формируется таблица с текстовыми полями внутри ячеек. Вводим в них необходимые данные, жмём сформировать. В текстовое поле на родительской паге будет вставлен HTML код таблицы с набитым содержимым ячеек.
================
ЗЫ: код выложил не просто так. Очень хотелось бы чтоб нашлись умельцы, ктоб помог доработать код. Хотелось бы внедрить возможность сливать ячейки как по горизонтали так и по вертикали. | |
| |
|
|
| |
|
|
| |
для: [CHOL]Scorpion
(01.08.2005 в 20:57)
| | | Ох, прошу вас прикрепляйте лучше файлом =( | |
| |
|
|
| |
|
|
| |
для: Akira
(01.08.2005 в 20:59)
| | | дак и файлом можно конечно. Только ведь так код сразу видно. А файл ещё и не каждый качать будет чтоб посмотреть. | |
| |
|
|
