下面写了jquery,主要是想实现在一个添加页面添加几个新的标题和内容,内容里有textbox,radio,checkbox。因为是第一次写这样的,有点乱,莫不找头脑,请大家帮帮忙修改一下,或者有没有相关类似的实例php 代码<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">
<input type="radio" id="textbox" name="select" value="1"> Textbox
<input type="radio" id="radio" name="select" value="2"> radio button
<input type="radio" id="checkbox" name="select" value="3"> checkbox
<br> 
</td>
</tr>
</tbody>
</table>
JS 代码
(function($){
$(document).ready(function(){var flag = true;
var title = $(':input[name=title]');$('#textbox').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();});$('#radio').click(function(){
var tr_last = $('.formTable tbody tr td').eq(1);
if($(tr_last).find('.btn_radio_opt').length < 1)
{
$(tr_last).append('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');
}
$('.btn_radio_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span>');
/*****************************************************************************************************/
$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
/*****************************************************************************************************/
});
});$('#checkbox').click(function(){
var tr_last = $('.formTable tbody tr td').eq(1);
if($(tr_last).find('.btn_checkbox_opt').length < 1)
{
$(tr_last).append('<span style="display:block;margin-top:5px"><input type="text" name="checkbox" value=""><button name="chk_btn_add" class="btn_checkbox_opt">添加</button></span>');
}$('.btn_checkbox_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="checkbox" value=""><button name="chk_btn_del" class="btn_chk_del_opt">删除</button></span>');
/*****************************************************************************************************/
$('.btn_chk_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
/*****************************************************************************************************/
});});$('#add').click(function(){
if($('.formTable tbody tr').eq(0).find('input[type=text]').val() == "")
{
alert('请输入标题!');return;
}
else
{
if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
{
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(':input[type=text]').val("");
$('.formTable tbody tr').eq(1).find('.btn_radio_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_radio_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_chk_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_checkbox_opt').remove();
$('.formTable tbody tr').eq(1).find(':text[name="radio"]').remove();
$('.formTable tbody tr').eq(1).find(':text[name="checkbox"]').remove();
/*****************************************************************************************************/
$('.formTable tbody tr').eq(1).find('input:radio').each(function(){
var oldname = $(this).attr("name");
$(this).attr("name",oldname+"a");
});
/*****************************************************************************************************/
$('.formTable tbody tr').eq(1).find('input:text').each(function(){
var textname = $(this).attr("name");
$(this).attr("name",textname+"a");
});
/*****************************************************************************************************/
$('.formTable tbody tr').eq(0).find('input:text').each(function(){
var title = $(this).attr("name");
$(this).attr("name",title+"a");
});
/*****************************************************************************************************/
$('.formTable tbody tr').eq(1).find('button').each(function(){
var btn = $(this).attr("name");
$(this).attr("name",btn+"a");
});/*****************************************************************************************************/
}
else
{
alert('请输入内容格式');return;
}
}});
$('#popup>thead>tr>td>span>a.save').click(function(){var frm = $('form[name=userinfo]');
var url = '/hr/survey/insert';
if($(frm).find(':hidden[name=user_seq]').val() > 0)
{
url = '/hr/survey/update';
}
$(frm).attr('action', url);
$(frm).submit();
});
});
})(jQuery);

解决方案 »

  1.   


    var title = $(':input[name=title]');//冒号应该是错误的!你一点一点的调试一下吧!
      

  2.   

    我想问一下,像下面这么写的话,会出现当点击radio的时候下面出来添加按钮,但点击好几次radio按钮的话,当点击添加按钮会生成好几个text和删除按钮的,请问这个怎么解决?是不是要把$('.btn_radio_opt').click(function(){
    $(this).after('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_del" class="btn_radio_del_opt">삭제</button></span>');
    /*****************************************************************************************************/
    $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
    /*****************************************************************************************************/这段写在$('#radio').click(function()的外面
    如下代码:$('#radio').click(function(){
    var tr_last = $('.formTable tbody tr td').eq(1);
    if($(tr_last).find('.btn_radio_opt').length < 1)
    {
    $(tr_last).append('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_add" class="btn_radio_opt">추가</button></span>');
    }
    $('.btn_radio_opt').click(function(){
    $(this).after('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_del" class="btn_radio_del_opt">삭제</button></span>');
    /*****************************************************************************************************/
    $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
    /*****************************************************************************************************/
    });
    });
      

  3.   

    你如果想只生成一个的话就给这个input和那个韩语的东西包上一个有id的层什么的,每次点击的时候判断下这个id是否存在,或者直接将$(‘#id’)
    的html替换不就可以了!
    jquery精髓就是选择器类似于css的各种选择器。你多看看教程,慢慢调试!
      

  4.   

    当我点击radio的时候下面会出现text和添加按钮,点击添加按钮的话下面会出来一个text和删除按钮,但是我点击很多次radio之后,再次点击那个添加按钮的话会出来好几个text和删除按钮。怎样才能 不管点击几次radio,都让点击一次添加按钮的话,只出来一个text和删除按钮
    $('#radio').click(function(){
    var tr_last = $('.formTable tbody tr td').eq(1);
    if(tr_last.find('.btn_radio_opt').length < 1)
    {
    tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');
    }
    $('.btn_radio_opt').click(function(){
    $(this).after('<span style="display:block;margin-top:5px"><input type="text" name="radio" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span>');
    $('.btn_radio_del_opt').click(function(){
    $(this).prev().remove();
    $(this).remove();
    });
    });
    });