Javascript 使用jQuery动态添加或删除行_Javascript_Jquery

Javascript 使用jQuery动态添加或删除行

javascript jquery

Javascript 使用jQuery动态添加或删除行,javascript,jquery,Javascript,Jquery,我有一个这样的代码 <html> <head> <title>test</title> <script type="text/javascript"> var counter = 2; var idCounter= 3; function addNew() { if(counter<=5){

我有一个这样的代码

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

好的，因为我没有更好的事情要做，老实说，我很好奇，我把这些放在一起了。正如我在上面的评论中所暗示的，我并不特别喜欢它的布局方式，因此我使用了以下xhtml：

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

然而，我不确定你所说的：

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

如果你能解释这意味着什么，或者你希望他们如何提供，理想情况下，为什么他们还没有提供给你，我会尽我所能帮助你。

好的，因为我没有更好的事情要做，老实说，我很好奇，我把这些放在一起。正如我在上面的评论中所暗示的，我并不特别喜欢它的布局方式，因此我使用了以下xhtml：

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

然而，我不确定你所说的：

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

如果您能解释这意味着什么，或者您希望它们如何可用，以及理想情况下，为什么它们尚未提供给您，我将尽我所能提供帮助。

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

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

如果您使用我在这里展示的第一种方法，那么使用数组发布数据将很容易。就这些

我有一个解决方案可以帮助您使用以下代码

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

如果您使用我在这里展示的第一种方法，那么使用数组发布数据将很容易。就这些

请不要问为我编写代码的问题。另外，请不要在没有说明具体问题的情况下发布完整的源代码。我希望最多添加五行，单击“添加”按钮一次，删除每行相邻的“删除”按钮一次。我还需要在每个文本框中输入值。您是否与特定的xhtml代码有关，或者您是否愿意接受一些不那么可怕的东西？请不要问我写代码的问题。另外，请不要在没有说明具体问题的情况下发布完整的源代码。我希望最多添加五行，单击“添加”按钮一次，删除每行相邻的“删除”按钮一次。我还需要在每个文本框中输入值。你是否与特定的xhtml代码有关，或者你是否愿意接受一些不那么可怕的东西？@01，伙计，我得到+1表示厌倦。。？如果我觉得无聊，开始喝酒，我会得到更多吗。。。堆栈溢出就是这样工作的吗=D@01，老兄，我无聊得+1。。？如果我觉得无聊，开始喝酒，我会得到更多吗。。。堆栈溢出就是这样工作的吗=D