复制表行并使用jquery插入

时间:2013-04-11 06:51:59

标签: javascript jquery

我有这个小提琴http://jsfiddle.net/CbRHu/ ..我基本上想要做的就是当最后一行的数据选择,即dropdownlist选项值改变时我想创建一个新行并复制最后一行的值像所有的td和内部东西一样进入这个新行并将其附加到表中,然后当最后一行是新创建的行更改时,另一个新行被创建。不知道如何做到这一点..

<table id="Main">
   <tr>
    <TD>
        <SELECT name=ctl00$m$g_c10b6cde_8531_45b1_aee8_b49b773919bf$ctl16>
          <OPTION value=1>WCF</OPTION>
          <OPTION value=2>ASP.Net</OPTION> 
          <OPTION value=3>HTML</OPTION> 
          <OPTION value=4>JS</OPTION> 
          <OPTION selected value=5>client</OPTION>
        </SELECT>
   </TD>
   <TD>
       <SELECT name=ctl00$m$g_c10b6cde_8531_45b1_aee8_b49b773919bf$ctl17> 
          <OPTION selected value=Begineer>Begineer</OPTION> 
          <OPTION value=Intermediate>Intermediate</OPTION> 
          <OPTION value=Expert>Expert</OPTION> 
          <OPTION value=Geek>Geek</OPTION>
       </SELECT>
    </TD>
  <TD style="COLOR: white">18</TD>   

<TR>
  <TD>
      <SELECT id=ctl00_m_g_c10b6cde_8531_45b1_aee8_b49b773919bf_TechCellDS onchange="Add()"       name=ctl00$m$g_c10b6cde_8531_45b1_aee8_b49b773919bf$TechCellDS>
        <OPTION value=1>WCF</OPTION> 
        <OPTION value=2>ASP.Net</OPTION> 
        <OPTION selected value=3>HTML</OPTION>
        <OPTION value=4>JS</OPTION>
        <OPTION value=5>client</OPTION> 
        <OPTION value=Select>Select</OPTION>
       </SELECT>
   </TD>
      <TD>
       <SELECT name=ctl00$m$g_c10b6cde_8531_45b1_aee8_b49b773919bf$ctl17 id=ctl00_m_g_c10b6cde_8531_45b1_aee8_b49b773919bf_TechCellDS onchange="Add()"> 
          <OPTION selected value=Begineer>Begineer</OPTION> 
          <OPTION value=Intermediate>Intermediate</OPTION> 
          <OPTION value=Expert>Expert</OPTION> 
          <OPTION value=Geek>Geek</OPTION>
       </SELECT>
    </TD>
    <tr>    
</table>

由于

3 个答案:

答案 0 :(得分:0)

试试这个 -

function addRow()
            {
                var n=$("#elementCount").val();
                var row=$('#rowid'+(n-1));
                row.clone(true).attr('id','rowid'+(n)).insertAfter(row);

                n++;

                $("#elementCount").val(n);
            }

elementCount =包含行数的隐藏字段的ID。

答案 1 :(得分:0)

这是javascript:

var main = $('#Main');
var template = $('#Main').find("tr:first").html().toString();

function addTemplate() {
    main.find("tr:last").after('<tr>' + template + '</tr>');
}

$('.last:last').live('change', function () {
       addTemplate();
})

一个有效的例子: http://jsfiddle.net/basarat/CbRHu/12/

答案 2 :(得分:0)

以下是您的问题的答案

$(document).ready(function () {
    function addrow() {
        var newtr = $('#Main tr').eq(-1).html();
        $('#Main tbody').append('<tr>' + newtr + '</tr>');
    }
    $(document).on("change", $('#Main tr:last select'),

    function () {
        addrow();

    });
});

JS FIDDLE LINK