Динамически добавить удалить строки с помощью JQuery

У меня есть код, как это ...Динамически добавить удалить строки с помощью JQuery

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      var counter = 2; 
      var idCounter= 3; 
      function addNew() { 
      if(counter<=5){ 
       // Get the main Div in which all the other divs will be added 
       var mainContainer = document.getElementById('mainContainer'); 
       // Create a new div for holding text and button input elements 
       var newDiv = document.createElement('div'); 
       newDiv.id='divs'+counter; 
       // Create a new text input 
       var newText = document.createElement('input'); 
       var newText1 = document.createElement('input'); 
       newText.type = "input"; 
       newText.id="ans"+(idCounter); 
       idCounter++; 
       newText1.type = "input"; 
       newText1.id="ans"+(idCounter); 
       idCounter++; 
       // newText.value = counter; 
       // Create a new button input 
       var newDelButton = document.createElement('input'); 
       newDelButton.type = "button"; 
       newDelButton.value = "Remove"; 

       // Append new text input to the newDiv 
       newDiv.appendChild(newText); 
       newDiv.appendChild(newText1); 
       // Append new button input to the newDiv 
       newDiv.appendChild(newDelButton); 
       // Append newDiv input to the mainContainer div 
       mainContainer.appendChild(newDiv); 
       counter++; 

       // Add a handler to button for deleting the newDiv from the mainContainer 
       newDelButton.onclick = function() { 
         mainContainer.removeChild(newDiv); 
         counter--; 
       } 
      } 
      else{ 
       alert('Only 5 rows are allowed'); 
      }}sss 
      function removeRow(divId){ 
       mainContainer.removeChild(divId); 
       counter--; 
      } 

     </script> 
    </head> 

    <body > 
     <div id="mainContainer"> 
      <div><input type="button" value="Add New Row" onClick="addNew()"></div> 
      <div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div> 
     </div> 
    </body> 
</html>

Я хочу добиться того же с помощью jQuery.I также необходимо значения, введенные в каждой из этих textboxes.Please помощи.

источник

2010-12-05 Hector Barbossa

Пожалуйста, не спрашивайте «напишите мой код для меня». А также, пожалуйста, не публикуйте полный исходный код без указания конкретной проблемы. – Tomalak 2010-12-05 16:31:24

Я хочу добавить максимум пять строк, щелкнуть кнопкой добавления и удалить строки onclick соседней кнопки удаления для каждой строки. Мне также нужно получить значения, введенные в каждое из этих текстовых полей. – 2010-12-05 16:38:03

Хорошо, потому что мне нечего было делать, и, честно говоря, мне было любопытно, я положил это вместе. Как следует в моем комментарии выше, я не особенно нравится, как вы должны были это выложил, так что я использовал следующее (X) HTML:

<form action="#" method="post"> 
    <fieldset id="rows"> 
     <ul> 
      <li> 
       <input type="text" id="ans1" name="ans1" /> 
       <input type="text" id="ans2" name="ans2" /> 
      </li> 
     </ul> 
    </fieldset> 
    <fieldset id="controls"> 
     <button id="addRow">add</button> 
     <button id="removeRow" disabled>remove</button> 
    </fieldset> 
</form>

со следующими JQuery (хотя я явно не имею оптимизировано или рафинированные, но она должна соответствовать вашим требованиям):

$(document).ready(
    function(){ 
     $('#addRow').click(
      function() { 
       var curMaxInput = $('input:text').length; 

       $('#rows li:first') 
        .clone() 
        .insertAfter($('#rows li:last')) 
        .find('input:text:eq(0)') 
        .attr({'id': 'ans' + (curMaxInput + 1), 
          'name': 'ans' + (curMaxInput + 1) 
          }) 
        .parent() 
        .find('input:text:eq(1)') 
        .attr({ 
         'id': 'ans' + (curMaxInput + 2), 
         'name': 'ans' + (curMaxInput + 2) 
        }); 
       $('#removeRow') 
        .removeAttr('disabled'); 
       if ($('#rows li').length >= 5) { 
        $('#addRow') 
         .attr('disabled',true); 
       } 
       return false; 
      }); 

     $('#removeRow').click(
      function() { 
       if ($('#rows li').length > 1) { 
        $('#rows li:last') 
         .remove(); 
       } 
       if ($('#rows li').length <= 1) { 
        $('#removeRow') 
         .attr('disabled', true); 
       } 
       else if ($('#rows li').length < 5) { 
        $('#addRow') 
         .removeAttr('disabled'); 

       } 
       return false; 
      }); 
    });

JS Fiddle demo of the above

Я, однако, не уверен, что вы имеете в виду:

Мне также нужны значения, введенные в каждом из этих текстовых полей.

Если вы можете объяснить, что это значит, и как вы хотите, чтобы они были доступны (и, в идеале, почему они не уже доступны для вас) Я сделаю все возможное, чтобы помочь.

источник

2010-12-05 17:39:23

У меня есть решение, которое поможет вам использовать здесь код

<script type="text/javascript" src="js/jquery.js"></script> 
<script type = 'text/javascript'> 
var newRowNum = 1; 
var project_id ; 
$(function() { 
$('#addnew').click(function() 
{ 
    newRowNum++; // This is counter 
    //var i = 0; 
    /////////  <a> <td> <tr> 
    var addRow = $(this).parent().parent(); 
    ///////// In the line below <tr> is created 
    var newRow = addRow.clone(); 
    $('input', addRow).val(''); 
    $('td:first-child', newRow).html(); 
    $('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>'); 

    var newID = 'project'+newRowNum; 
    var add = 'description'+newRowNum; 
    newRow.children().children().first('input').attr('id', newID).attr('name', newID); 
    newRow.children().children().eq(1).attr('id', add).attr('name', add); 

    $('#table').find('tr:last').after(newRow); 

    $('a.remove', newRow).click(function() 
    { 
    newRowNum--; 
    $('#table').find('tr:last').remove(); 
    return false; 
    }); 
    return false; 
    }); 
    }); 
    </script> 

    <table width="75%" border="0" align = "center" id = 'table'> 
    <tr> 
    <td align = "center">Project </td> 
    <td align = "center">Description</td> 
    <td align = "center">Add Row</td> 
    </tr> 
    <tr> 
    <td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td> 
    <td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td> 
    <td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td> 
    </tr> 
</table>

Вы также можете дать каждому текстовом поле уникальное имя, если вы измените код, как это и изменение этих двух переменных

var newID = 'project'+newRowNum; 
var add = 'description'+newRowNum;

, если вы используете первый метод, показанный здесь, будет легко отправить данные с помощью массива.

Вот и все.

источник

2011-05-14 09:12:21

Динамически добавить удалить строки с помощью JQuery

ответ

Смежные вопросы