Question

我有这样的代码......

<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实现相同的目标。我还需要在每个文本框中输入的值。请帮助。

Answer 1

好吧，因为我没有更好的事情可做，而且说实话，我很好奇，我把它放在一起。正如我在上面的评论中暗示的那样，我并不特别喜欢它的布局，所以我使用了以下（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

但是，我不确定你的意思：

我还需要在每个文本框中输入的值。

如果您可以解释这意味着什么，或者您希望它们如何可用（理想情况下，为什么它们已经可供您使用），我会尽力帮助您。

Answer 2

我有一个解决方案，可以帮助您使用这里的代码

<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;

如果您使用我在此处显示的第一种方法，则可以使用数组轻松发布数据。

这就是全部。

使用jQuery动态添加删除行

2 个答案: