当前位置: 代码迷 >> Web前端 >> jqeury 动态创设div
  详细解决方案

jqeury 动态创设div

热度:520   发布时间:2012-10-26 10:30:59.0
jqeury 动态创建div

案例需求:根据select的option所选值,确定div的生成个数

?

jquery代码:

function choosePersonNum(num)
?{
??$(".temp").remove();
??for(var i=1;i<num;i++)
??{
???var div = $("#templete");
???var newDiv = div.clone(true);
???newDiv.addClass("temp");
???newDiv.insertAfter(div);
???newDiv.show();
??}
?????????????????????
?}

?

html代码

<div class="subnav_load_table_c" id="templete">
????? <table width="100%" border="0" cellspacing="0" cellpadding="0">
??????????????????? <tr>
????????????????????? <td><span class="subnav_load_table_span">人员姓名:</span>
??????????????????????? <input type="text" name="textfield2" class="subnav_load_table03" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
????????????????????? <td><span class="subnav_load_table_span">手 机:</span>
??????????????????????? <input type="text" name="textfield2" class="subnav_load_table04" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
????????????????????? <td><span class="subnav_load_table_span">办公电话:</span>
??????????????????????? <input type="text" name="textfield2" class="subnav_load_table04" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
??????????????????? </tr>
??????????????????? <tr>
????????????????????? <td><span class="subnav_load_table_span">职务分类:</span>
??????????????????????? <select name="select">
??????????????????????? <option>总经理助理</option>
??????????????????????? </select>
???????????????????????  ???<span class="subnav_load_table_span">职务名称:</span> <input type="text"???? name="textfield2" class="subnav_load_table04" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
????????????????????? <td><span class="subnav_load_table_span">传 真:</span>
??????????????????????? <input type="text" name="textfield2" class="subnav_load_table04" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
????????????????????? <td><span class="subnav_load_table_span">电子邮箱:</span>
??????????????????????? <input type="text" name="textfield2" class="subnav_load_table04" />???????????????????????
??????????????????????? <span class="subnav_load_table_sgin">*</span></td>
??????????????????? </tr>
????????????????? </table>
????</div>

?

建立templete模板,然后每次点击select的时候,都要清除一下上次生成的div,这样就不会叠加了