使用jQuery动态添加行

时间:2013-06-29 20:58:41

标签: javascript jquery

我有一个包含选择字段id =“projects”的表单,在更改时显示隐藏的选择字段“任务”,通过查询dB动态填充所选项目的任务。然后,用户可以输入从选择中的proj_id,task_id组合更新的小时数。以下代码显示“项目”更改时的“任务”选择。

$('.tasks').hide();
$('#projects').change(function(){
    $('.tasks').show();
    $('.tasks').append("<option>1</option><option>New Task</option>");
});

然后我添加了单击复制表单的按钮的功能,每行包含1.select'project'2。隐藏选择'任务'显示在项目选择3.隐藏文本框激活时选择新任务选项4。整周的小时输入框。

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

所需的功能是每个用户都能够添加行并选择不同的项目任务组合来记录他们的小时数。

这里的问题是,当我更改第一行项目时,所有添加的行也会受到影响,我无法将它们分开。我是新手,可以在网页中动态更改内容。请帮帮我。

整件事的工作小提琴 - http://jsfiddle.net/PuWMK/1/

1 个答案:

答案 0 :(得分:1)

你可以试试这个

$('.tasks').hide();
$('#dynform').on('change' , '#projects', function(){
    $(this).next('.tasks').show()
    .append("<option>1</option><option>New Task</option>")
});

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

$('.tasks').change(function(){
    $('#new').css('visibility','visible');
});

DEMO.