我想要的是当点击增加按钮的时候,textarea,radio,checkbox这些都放在下一个tr的td当中,而下面代码这些都会放在下一个tr当中的th当中,该怎么修改?
html代码
<fieldset>
<legend>New info</legend>
<table class="formTable">
<tbody>
<tr>
<th><input type="checkbox">{=_('标题')}</th>
<td colspan="3" class="length"><input type="text" name="title" value="" ></td>
</tr>
<tr> 
<th>{=_('内容')}</th>
<td colspan="3">
Textbox<button class="btn" id="addtext">增加</button>radio button<button class="btn" id="addradio">增加</button>checkbox<button class="btn" id="addcheckbox">增加</button>
</td>
</tr>
</tbody>
</table>
<div class="edit">
<button class="btn" id="add">继续</button>
</div>
</fieldset>js代码
$('#addtext').click(function(){
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after('<textarea name="textarea" rows="5"></textarea><br>');
$('#addradio').css("visible","hidden");
$('#addcheckbox').css("visible","hidden");
});

$('#addradio').click(function(){
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after('<input type="radio" name="radio" value="radio">{}');
});

$('#addcheckbox').click(function(){
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after('<input type="checkbox" name="checkbox" value="checkbox">{}');
});

$('#add').click(function(){
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone());
$('.formTable tbody tr').eq(0).find(':text[name="title"]').val("");
$('.formTable tbody tr').eq(1).find('textarea[name="textarea"]').remove();
$('.formTable tbody tr').eq(1).find(':radio[name="radio"]').remove();
$('.formTable tbody tr').eq(1).find(':checkbox[name="checkbox"]').remove();
//del();
});

解决方案 »

  1.   

    哦,不好意思,是应该放到
    <td colspan="3">
    Textbox<button class="btn" id="addtext">增加</button>radio button<button class="btn" id="addradio">增加</button>checkbox<button class="btn" id="addcheckbox">增加</button>这个地方的(就是当点击增加的时候,那些radio,checkbox,textarea应该放在这个地方)
    </td>
      

  2.   

    而且是放在
    Textbox<button class="btn" id="addtext">增加</button>radio button<button class="btn" id="addradio">增加</button>checkbox<button class="btn" id="addcheckbox">增加</button>这个代码的下面,而不是右面
      

  3.   

    按照如下进行了修改,现在发现一个新的问题,当点击继续按钮的时候,生成一个新的,但之前的在textarea里写的内容全部没了,text里的内容还在 $('#addtext').click(function(){
    var tr_last = $('.formTable tbody tr td').eq(1);
    $(tr_last).append('<br/><textarea name="textarea" rows="5"></textarea><br>');
    $('#addradio').css("visible","hidden");
    $('#addcheckbox').css("visible","hidden");
    });

    $('#addradio').click(function(){
    var tr_last = $('.formTable tbody tr td').eq(1);
    $(tr_last).append('<br/><input type="radio" name="radio" value="radio">{}');
    });

    $('#addcheckbox').click(function(){
    var tr_last = $('.formTable tbody tr td').eq(1);
    $(tr_last).append('<br/><input type="checkbox" name="checkbox" value="checkbox">{}');
    });

    $('#add').click(function(){
    var tr_last = $('.formTable tbody tr:last');
    $(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone());
    $('.formTable tbody tr').eq(0).find(':text[name="title"]').val("");
    $('.formTable tbody tr').eq(1).find('textarea[name="textarea"]').remove();
    $('.formTable tbody tr').eq(1).find(':radio[name="radio"]').remove();
    $('.formTable tbody tr').eq(1).find(':checkbox[name="checkbox"]').remove();
    //del();
    });