Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > создание поля при указании кол-ва

Автор: sayber 8.2.2007, 19:08

Скажите как реализовать такую вещь:

к примеру есть форма вида

Кол-во = 1 (поля все text)
поле 1 (1)
поле 2 (1)

Если в кол-во указать к примеру 3 то результат должен быть

Кол-во = 3
поле 1 (1)
поле 2 (1)

поле 1 (2)
поле 2 (2)

поле 1 (3)
поле 2 (3)

Автор: kaa 8.2.2007, 23:57

sayber, Тебе код или план действий?

Если план действий, то можно как:

ловишь keyup на поле "кол-во", и в функции обработки динамически создаёшь еще две пары полей и добавляешь в общий блок, т.е. типа такого

Код


<html>
<head></head>

<body>
    <div id="text_modul">
        <table>
            <tr>
                <td>Количество&nbsp;<input type="text" id="quantity"></td>
            </tr>
            <tr>
                <td><input type="text" id="text_field_1"></td>
            </tr>
            <tr>
                <td><input type="text" id="text_field_2"></td>
            </tr>
        </table>
    </div>
</body>
</html>

Код


function HandlerOnKeyUp()
{
   var owner_block = document.getElementById("text_modul");
   var table_node = document.createElement("table");
   var table_body = document.createElement("tbody");
   var tr_node = document.createElement("tr");
   var td_node = document.createElement("td");
   
   
   tr_node.appendChidl(td_node.cloneNode(true));
   tr_node.appendChidl(td_node.cloneNode(true));
   table_body.appendChild(tr_node);
   table_node.appendChild(table_body);
   
  //Добавляем пары строк стока раз скока увказано в поле "кол-во" минус 1
   for(var c=0; c<document.getElementsById("quantity").innerHTML; c++)
   {
      owner_block.appendChild(table_node.cloneNode(true));
      t = c+3; //Это у нас буит индекс в id текстового поля
              //Терь залазим в блок div, переходим к последней дочке - добавленной толькочто таблице,
         //в ней - к первой дочке (тело таблицы), в нём к первой ипоследней дочки поочереди (первая и вторая строка),
//в каждой из которых в первую дочь(ячейка) добавляем текст
      owner_block.lastChild.firstChild.firstChild.firstChild.innerHTML = "<input type='text' id='text_field_"+c+"'>';
      t ++;    
      owner_block.lastChild.firstChild.lastChild.firstChild.innerHTML = "<input type='text' id='text_field_"+c+"'>';   
   }
   
}

Тут конечно можно (да и нужно) еще фич всяких накрутить (вроде стиля таблицы и т.д.), но это уже на твоё усмотрение
Если что напутал прошу поправить smile

Автор: sayber 11.2.2007, 21:16

Спасибо. Правда нех не понял =)

Автор: sayber 12.2.2007, 19:41

Код


<script language="javascript" type="text/javascript">
    
    function AddImages() {
     var tbl = document.getElementById('tblSample');
     var lastRow = tbl.rows.length;
     var iteration = lastRow+1;
     var row = tbl.insertRow(lastRow);

     var cellRight = row.insertCell(0);
     var el = document.createElement('input');
     el.setAttribute('type', 'text');
     el.setAttribute('name', 'file_' + iteration);
     el.setAttribute('size', '41');
     el.setAttribute('value', iteration);

     var el2 = document.createElement('input');
     el2.setAttribute('type', 'file');
     el2.setAttribute('name', 'file_' + iteration);
     el2.setAttribute('size', '41');
     el2.setAttribute('value', iteration);
     cellRight.appendChild(el);
     cellRight.appendChild(el2);

     document.getElementById('images_number').value = iteration;
    }
    function RemoveImages() {
     var tbl = document.getElementById('tblSample');
     var lastRow = tbl.rows.length;
     if (lastRow > 1){
              tbl.deleteRow(lastRow - 1);
               document.getElementById('images_number').value =  document.getElementById('images_number').value - 1;
     }
    }
    </script>

Код


<form action="" method="post" enctype="multipart/form-data" name="form" id="form">

<div class="unterline"></div>
<table id="tblSample" class="upload">
 <tbody><tr id="row">
  <td><br><input size="41" name="file_1" type="text"></td>
</tr>
</tbody></table>

<div>
<input class="buttons" value=" - " style="width: 30px;"  onclick="RemoveImages();return false;" type="button">
<input class="buttons" value=" + " style="width: 30px;"  onclick="AddImages();return false;" type="button">
</div>

</form>

Вот выдрал. Но мне надо не просто такая функция а добавление целой таблице с данными ворма. То есть при нажатии на +
добавляется точно такой же кусок кода (только переменные другие)

Вот пример кода который должен добавляться

Код




<tr>
    <td>Фамилия<br />
      Имя<br /> Отчество
      </td>
    <td><input type="text" name="fio" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Название компании</td>
    <td><input type="text" name="company_name" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Должность</td>
    <td><input type="text" name="you_job" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Вид бизнеса</td>
    <td><input type="text" name="biznes" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Адрес</td>
    <td><textarea name="adress"   style="height:70px"></textarea>
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Город</td>
    <td><input type="text" name="city" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Индекс</td>
    <td><input type="text" name="zip" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Страна</td>
    <td><input type="text" name="country" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Электронный адрес</td>
    <td><input type="text" name="email" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Телефон</td>
    <td><input type="text" name="phone" value="" />
      <span class="st1">*</span></td>
  </tr>
  <tr>
    <td>Факс</td>
    <td><input type="text" name="fax" value="" />
      <span class="st1">*</span></td>
  </tr>