За последние 24 часа нас посетили 23016 программистов и 1722 робота. Сейчас ищут 1923 программиста ...

Добавить, удалить поле в таблице?

Тема в разделе "JavaScript и AJAX", создана пользователем Ambrella, 12 май 2008.

  1. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    Подскажите как можно в загруженную страницу добавить например по нажатию (+) нe oграниченое количество дополнительных полей, а по нажатию например (-) удалять те возле которых нажат символ?

    Это как в яндекс или гмаил почте реализованы строки загрузки изображений...
     
  2. DZEN

    DZEN Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    250
    Симпатии:
    0
    HTML:
    1.  
    2.     <script type="text/javascript" language="javascript">
    3.     var count = 1;
    4.     function AddElement()
    5.     {
    6.         var arr = new Array();
    7.         for(var e=1; e<count+1; e++)
    8.             arr[e] = document.getElementById('name'+e).value;
    9.         arr[e] = '';
    10.         count++;
    11.         var element = document.getElementById('paste');
    12.         element.innerHTML = '';
    13.         for(var e=1; e<count+1; e++)
    14.             element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />';
    15.     }
    16.     </script>
    17.    
    18.     <form action="">
    19.     <div id="paste">
    20.     <input type="text" name="name1" id="name1" /><br /><br />
    21.     </div>
    22.     <a href="javascript:AddElement();">Добавить поле</a><br /><br />
    23.     </form>
    24. </body></html>
    25.  
    Такое вот набросал. Можно было бы DOM использовать, но он то криво то по-разному на браузерах работает. Думаю удаление сам напишешь.
     
  3. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    Спасибо большое!

    Я пробовал без массива делать просто значение писал в невидимое поле и с ним работал типа:
    [js]function add_pole()
    {
    var i = document.table.pole.value;
    i = i + 1;
    document.getElementById('add_phone').innerHTML += '<input type="text" name="name'+i+'" value=""><br>';
    document.table.pole.value = i;
    }[/js]

    Ваш способ намного аккуратнее и добаляется только одно поле, у меня обновлялись все, даже уже заполненные.

    Во торой части я столкнулся проблемой удаления куска кода из массива так как -= с кодом не работает :(
    [js]document.getElementById('add_phone').innerHTML -= '<input type="text" name="name'+i+'" value=""><br>'[/js]


    Подскажите как удалять поля поштучно?
     
  4. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    Для таблицы - элемента table есть коллекции cells & rows.

    Если просто из дива удалять, то
    [js]
    var parent = document.getElementById("inputdiv");
    var inputs = parent.getElementsByTagName("input");
    parent.removeChild(divarr[0]); // для первого инпута
    parent.removeChild(divarr[(inputs.length-1)]); // для последнего
    [/js]
     
  5. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    DZEN
    Не могу разобраться — подскажите как в обратном порядке можно по одной удалить строки созданные при помощи вашего кода?
     
  6. DZEN

    DZEN Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    250
    Симпатии:
    0
    HTML:
    1.  
    2.      <script type="text/javascript" language="javascript">
    3.      var count = 1;
    4.      function AddElement()
    5.      {
    6.          var arr = new Array();
    7.          for(var e=1; e<count+1; e++)
    8.             arr[e] = document.getElementById('name'+e).value;
    9.         arr[e] = '';
    10.         count++;
    11.         var element = document.getElementById('paste');
    12.         element.innerHTML = '';
    13.         for(var e=1; e<count+1; e++)
    14.             element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />';
    15.      }
    16.      function RemElement()
    17.      {
    18.         if (count == 1) return;
    19.        
    20.          var arr = new Array();
    21.          for(var e=1; e<count; e++)
    22.             arr[e] = document.getElementById('name'+e).value;
    23.         arr[e] = '';
    24.         count-=1;
    25.         var element = document.getElementById('paste');
    26.         element.innerHTML = '';
    27.         for(var e=1; e<count+1; e++)
    28.             element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />';
    29.      }
    30.      </script>
    31.      
    32.      <form action="">
    33.      <div id="paste">
    34.      <input type="text" name="name1" id="name1" /><br /><br />
    35.      </div>
    36.      <a href="javascript:AddElement();">Добавить поле</a><br /><br />
    37.      <a href="javascript:RemElement();">Удалить поле</a><br /><br />
    38.      </form>
    39.  </body></html>
    40.  
     
  7. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    Смотрю в код и понимаю что без вас еще долго бы искал ответ...
    Спасибо большое! :)
     
  8. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    Мой код короче + не требует id.
     
  9. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    DZEN
    А если например сразу по три поля добавлять, как передать value и других полей в var arr ?

    HTML:
    1.  
    2.      <script type="text/javascript" language="javascript">
    3.      var count = 1;
    4.      function AddElement()
    5.      {
    6.          var arr = new Array();
    7.          for(var e=1; e<count+1; e++)
    8.             arr[e] = document.getElementById('name'+e).value;
    9.         arr[e] = '';
    10.         count++;
    11.         var element = document.getElementById('paste');
    12.         element.innerHTML = '';
    13.         for(var e=1; e<count+1; e++)
    14.             element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" ><input type="text" name="tri'+e+'" id="tri'+e+'" /></div>';
    15.      }
    16.      function RemElement()
    17.      {
    18.          if (count == 1) return;
    19.  
    20.          var arr = new Array();
    21.          for(var e=1; e<count; e++)
    22.             arr[e] = document.getElementById('name'+e).value;
    23.         arr[e] = '';
    24.         count-=1;
    25.         var element = document.getElementById('paste');
    26.         element.innerHTML = '';
    27.         for(var e=1; e<count+1; e++)
    28.             element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" ><input type="text" name="tri'+e+'" id="tri'+e+'" /></div>';
    29.      }
    30.      </script>
    31.  
    32.      <form action="">
    33.      <div id="paste">
    34.      <div><input type="text" name="name1" id="name1" ><input type="text" name="dva1" id="dva1" ><input type="text" name="tri1" id="tri1" /></div>
    35.      
    36.      </div>
    37.      <a href="javascript:AddElement();">Добавить поле</a><br /><br />
    38.      <a href="javascript:RemElement();">Удалить поле</a><br /><br />
    39.      </form>
    40.   </body></html>
    Пробовал вот так, не работает:

    HTML:
    1.  function AddElement()
    2.      {
    3.          var arr = new Array();
    4.          var dva_arr = new Array();
    5.          var tri_arr = new Array();
    6.          
    7. for(var e=1; e<count+1; e++)
    8.             arr[e] = document.getElementById('name'+e).value;
    9.         arr[e] = '';
    10.             dva_arr[e] = document.getElementById('dva'+e).value;
    11.         dva_arr[e] = '';
    12.             tri_arr[e] = document.getElementById('tri'+e).value;
    13.         tri_arr[e] = '';
    14.         count++;
    15.         var element = document.getElementById('paste');
    16.         element.innerHTML = '';
    17.         for(var e=1; e<count+1; e++)
    18.             element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" value="'+dva_arr[e]+'"><input type="text" name="tri'+e+'" id="tri'+e+'" value="'+tri_arr[e]+'" /></div>';
    19.      }
    20.      
     
  10. DZEN

    DZEN Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    250
    Симпатии:
    0
    Честно говоря из всего понял " по три поля добавлять " :)
     
  11. Ambrella

    Ambrella Активный пользователь

    С нами с:
    10 ноя 2007
    Сообщения:
    206
    Симпатии:
    0
    Спасибо! :D :D :D
    С остальным разобрался сам!!!