Question

我的要求是添加两个并排的文本框一旦用户点击添加超链接。在该行之后，添加链接应该消失。同时点击删除必须只删除同一个tr中的那两个文本框。我的代码是这样的。没有办法完成。但我需要建议关于实施。

<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('<TABLE><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>

Answer 1

首先，你的HTML很可怕：

没有input type="textbox"（也许你的意思是type="text"或简称为textarea？）
您的tr似乎没有父table元素（tr不是div的有效子项，据我所知，还有{{1} }}是table）的必需父元素。
tr不应出现在单元格之间，
我假设这只是为了证明你的工作，但JavaScript变量 不应该在html中。

然而，根据我对你想达到的目标的最佳猜测，我可以提供：

jQuery的：

id="textbox' + counter + '" value=""

HTML

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

Demo at JS Fiddle

当然，这是您想要的最佳猜测。如果我误解了您的要求，请留下评论，我会尽力帮助和/或调整它以更贴近您的需求。

Answer 2

目前还不清楚你的问题是什么，你得到了什么错误？脚本没有做应该做的事情？

我建议清理您的标记，以使您的网页至少有效。

一旦你有一个更清晰有效的html jquery append和remove语法很简单，据我所知你甚至不需要一个计数器，使用jquery选择器来获取每个用户点击的DOM状态..

BTW jquery当前版本是1.4.4，最好始终使用最新版本。

使用jquery添加和删除文本框

2 个答案:

jQuery的：

HTML