JavaScript добавить на форму поля ввода <input ...

0 спам

294

07 августа 2009 года

Plisteron

982 / / 29.08.2003

Доброе время суток!
Волею судеб мне пришлось заняться web-программированием...
Есть примерно следующее:

Свернуть исходник

Код:

<form action="count.php" method="post">

<table id="tab1" border="0">

  <tr>

    <th>Наименоваине</th>

    <th>Начальный остаток</th>

    <th>Приход</th>

    <th>Расход</th>

    <th>Конечный остаток</th>

  </tr>

  <tr>

    <td><input type="text" id="naim1"  name="naim1"  value="Конь бронзовый" /></td>

    <td><input type="text" id="begin1" name="begin1" value="10" /></td>

    <td><input type="text" id="in1"    name="in1"    value="4" /></td>

    <td><input type="text" id="out1"   name="out1"   value="6" /></td>

    <td><input type="text" id="end1"   name="end1"   value="12" /></td>

  </tr>                                          

  <tr>                                           

    <td><input type="text" id="naim2"  name="naim2"  value="Пиджак турецкий" /></td>

    <td><input type="text" id="begin2" name="begin2" value="5" /></td>

    <td><input type="text" id="in2"    name="in2"    value="1" /></td>

    <td><input type="text" id="out2"   name="out2"   value="3" /></td>

    <td><input type="text" id="end2"   name="end2"   value="7" /></td>

  </tr>                                          

  <tr>                                           

    <td><input type="text" id="naim3"  name="naim3"  value="" /></td>

    <td><input type="text" id="begin3" name="begin3" value="" /></td>

    <td><input type="text" id="in3"    name="in3"    value="" /></td>

    <td><input type="text" id="out3"   name="out3"   value="" /></td>

    <td><input type="text" id="end3"   name="end3"   value="" /></td>

  </tr>

</table>

<input type="submit" value="Сохранить"/>

</form>

Хочется, чтобы при заполнении последней строки в формочку JavaScript-ом добавлялась новая строка (naim4...end4, naim5...end5 и т.д). Для простоты будем считать, что строка заполнена, если хотя бы одно из полей непустое. Собственно, вопрос: как это реализовать?

Вдогонку вопрос про css: как эту формочку сделать немного похожей на таблицу, а не на набор полей ввода? Например, выглядеть такой, как таблица Excel или компонент Grid в распространённых не-web средах программирования.

PS. Прошу не пинать ногами за тупые вопросы.
PPS. Может быть, есть более удобный способ получить от пользователя табличные данные?

Подписаться на вопросНеобходима регистрация

По порядку

Сначала полезные

Сначала решения

4 ответа

-2 спам

244

07 августа 2009 года

UAS

2.0K / / 19.07.2006

Делать что-то типа (код не проверял и примерный, можно оптимизировать):

Код:

hasEmptyFields = false;

i = 1;

while( document.getElementById("naim"+i) !== "undefined" && hasEmptyFields == false ) {

    if( document.getElementById("naim"+i).value == "" ) hasEmptyFields = true;

    // бла-бла для остального

    i++;

}

Ну а далее ясно. Если hasEmptyFields == false, то надо добавить ещё строчку. Как добавлять - ну желательно через DOM добавлять строку к ячейке, а к ней уже ячейки, так как простым innerHTML здесь не очень подойдет, но можно.

Как Grid - пропишите в свойствах width: 100%; height: 100%; у input

Цитировать

1 спам

294

07 августа 2009 года

Plisteron

982 / / 29.08.2003

Цитата: UAS

Как Grid - пропишите в свойствах width: 100%; height: 100%; у input

Код:

<table id="tab1" border="0" cellpadding="0" cellspacing="0">

<!-- и т.д -->

<td><input type="text" id="naim1"  name="naim1"  value="Конь бронзовый" style="width: 100%; height: 100%" /></td>

<!-- и т.д -->

дало не вполне требуемые результаты, ну да ладно, "будем искать" ((с)...).

Цитата: UAS

желательно через DOM добавлять строку к ячейке, а к ней уже ячейки, так как простым innerHTML здесь не очень подойдет, но можно.

Спасибо за наводку! Творчески переработав, получил

Свернуть исходник

Код:

i = 4;

function ExtendForm()

{

    var table = document.getElementById("tab1");

    var td3_1 = document.createElement("td");

    td3_1.innerHTML = "<input type=\"text\" id=\"naim\"" + i + " name=\"naim\"" + i + "  value=\"\" />";

    var td3_2 = document.createElement("td");

    td3_2.innerHTML = "<input type=\"text\" id=\"begin\"" + i + " name=\"begin\"" + i + "  value=\"\" />";

    var td3_3 = document.createElement("td");

    td3_3.innerHTML = "<input type=\"text\" id=\"in\"" + i + " name=\"in\"" + i + "  value=\"\" />";

    var td3_4 = document.createElement("td");

    td3_4.innerHTML = "<input type=\"text\" id=\"out\"" + i + " name=\"out\"" + i + "  value=\"\" />";

    var td3_5 = document.createElement("td");

    td3_5.innerHTML = "<input type=\"text\" id=\"end\"" + i + " name=\"end\"" + i + "  value=\"\" />";

    tr3 = document.createElement("tr");

    tr3.appendChild(td3_1);

    tr3.appendChild(td3_2);

    tr3.appendChild(td3_3);

    tr3.appendChild(td3_4);

    tr3.appendChild(td3_5);

    allRows = table.getElementsByTagName("tr");

    tr3 = allRows[0].parentNode.appendChild(tr3);

}

</script>

Понятно, что здесь широкое поле деятельности по оптимизации. :)

Цитировать

1 спам

563

07 августа 2009 года

MrLinker

249 / / 17.09.2006

Цитата:

дало не вполне требуемые результаты

[HTML]<style type="text/css">
table#tab1
{
border-collapse: collapse;
border: 2px solid gray;
}

table#tab1 td, th
{
border: 1px solid gray;
padding: 2px;
}

table#tab1 input
{
border: 0px;
width: 95%;
height: 100%;
}
</style>
[/HTML]
[HTML]
<body>
<form action="count.php" method="post">
<table id="tab1">
<tr>
...
и т.д. как было
[/HTML]

Цитировать

0 спам

294

07 августа 2009 года

Plisteron

982 / / 29.08.2003

Цитата: MrLinker

[html]<style type="text/css">[/html]

Спасибо! Мой вариант:[html]<style type="text/css">
.mycell
{
width: 100%;
height: 100%;
border-style: solid;
border-width: 1px;
}

.mycell_right
{
width: 100%;
height: 100%;
border-style: solid;
border-width: 1px;
border-left: none;
}

.mycell_bottom_left
{
width: 100%;
height: 100%;
border-style: solid;
border-width: 1px;
border-top: none;
}

.mycell_bottom
{
width: 100%;
height: 100%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
}

</style>

<script language="JavaScript">
var r = 4;
var form_ids = ['naim', 'begin', 'in', 'out', 'end'];

function ExtendForm()
{
var table = document.getElementById('tab1');
var td3 = new Array(5);
var tr3 = document.createElement('tr');

for(k = 0; k < 5; k++)
{
td3[k] = document.createElement('td');
td3[k].innerHTML = '<input type="text" id="'
+ form_ids[k] + r + '" name="' + form_ids[k] + r
+ '" value="" class="mycell_bottom' + ((k == 0)? '_left' : '') + '"'
+ 'align=' + ((k == 0)? '"left"' : '"right"') + ' />';
tr3.appendChild(td3[k]);
}

allRows = table.getElementsByTagName("tr");
tr3 = allRows[0].parentNode.appendChild(tr3);

r++;
}
</script>

<form action="count.php" method="post">
<table id="tab1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" id="naim1" name="naim1" value="+++ 1" class="mycell" /></td>
<td><input type="text" id="begin1" name="begin1" align="right" value="10" class="mycell_right" /></td>
<td><input type="text" id="in1" name="in1" value="4" class="mycell_right" /></td>
<td><input type="text" id="out1" name="out1" value="6" class="mycell_right" /></td>
<td><input type="text" id="end1" name="end1" value="12" class="mycell_right" /></td>
</tr>

[/html]

Но Ваш, безусловно, симпатичнее.

Цитировать

Ваш аккаунт

Последние темы форума

Почтовая рассылка

JavaScript добавить на форму поля ввода <input ...

4 ответа