Adding and removing textboxes using jquery [closed]_问答_开发者

Adding and removing textboxes using jquery [closed]

开发者 https://www.devze.com 2023-01-25 18:47 出处：网络

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical andcannot be reasonably answered in its current form. For help clari

相关专题：jquery

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

My requirement is to add two side by side text box Once user click on add hyperlink.After that for that row add link should disappear. Also clicking on remove must remove only those two textbox which are in the same tr.My code is like this.Its no way complete.But I need suggestions regarding the implementation.

<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
 div{
  padding:4px;
 }
</style>

</head>

<body>


<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $(".addButton").live("click", function () {

 if(counter>5){
            alert("Only 5 textboxes allow");
            return false;
 }   

 var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

 newTextBoxDiv.html('<TABL开发者_Python百科E><TR id="'+counter+'"><TD>' +
'<input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD><TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR></TABLE>');

 newTextBoxDiv.appendTo("#TextBoxesGroup");


 counter++;
     });

     $(".removeButton").live("click", function () {
 if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

 counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

 var msg = '';
 for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
 }
       alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
  <TR><TD><input type='textbox' id='textbox1' ></TD>&nbsp;<TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR>
 </div>
</div>




</body>
</html>

First, your html is horrible:

There is no input type="textbox" (perhaps you mean type="text" or, simply, textarea?)
Your tr seems to have no parent table element (a tr isn't a valid child of a div, so far as I'm aware, and a table is a required parent element of a tr).
  shouldn't be appearing between cells,
I'm assuming that this was just to demonstrate your working, but the JavaScript variables id="textbox' + counter + '" value="" shouldn't be in the html.

However, based on my best guess for what you want to achieve, I can offer this:

jQuery:

$(document).ready(
    function(){
        $('button.add').live('click',
            function(){
                $(this)
                    .closest('tr')
                    .clone()
                    .appendTo('table');
                $(this)
                    .text('Remove')
                    .removeClass('add')
                    .addClass('remove');
            });
        $('button.remove').live('click',
            function(){
                $(this)
                    .closest('tr')
                    .remove();
            });
        $('input:text').each(
            function(){
                var thisName = $(this).attr('name'),
                    thisRrow = $(this)
                                .closest('tr')
                                .index();
                $(this).attr('name', 'row' + thisRow + thisName);
                $(this).attr('id', 'row' + thisRow + thisName);
            });
    });

html

<table>
    <tr>
        <td><input type="text" name="col1" id="col1" /></td>
        <td><input type="text" name="col2" id="col2" /></td>
        <td><button class="add">Add</button></td>
    </tr>
</table>

Demo at JS Fiddle.

This is, of course, a best-guess at what you want. If I've misunderstood your requirements, please leave comments and I'll do my best to help out and/or adapt this to be closer to what you need.

It's not clear what's your problem, what errors are you getting? The script is not doing what is supposed to do?

I suggest cleaning your markup in order to make your page at least validate.

Once you have a clearer and valid html the jquery append and remove syntax is straightforward, as far as I can see you don't even need a counter here, use jquery selectors to get the DOM state on every user click..

BTW jquery current version is 1.4.4, it's good practice to use always the latest version available.