Javascript 使用jquery复制表行和插入

我有这把小提琴，所以基本上我想在这里做的是当最后一行的数据选择，即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>

谢谢你试试这个-

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。

以下是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();
})

还有一个工作示例：

---

以下是您问题的答案

$(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();

    });
});

---

您正在清楚地使用asp.net webforms。为什么不在服务器端执行此操作？我不想在每次选择后都进行回发，并且此Web部件位于sharepoint 2007中，我不确定是否可以使用AJAX，因此我认为客户端会执行此操作。您生成的HTML无效tr未关闭请参见此@a.V为什么不将其作为答案发布？您所说的隐藏字段是什么意思？它被维护以便$'rowid'+n-1将为我提供最后一行对象。我正在考虑第1行、第2行、第3行中的tr id，如下所示…$table.append$table+'tr:last'。clone；这似乎工作正常..我只剩下2个问题..因此在最后一行中有两个下拉列表..我需要检查这两个下拉列表在调用此Add函数时是否都有一些值，如果它通过了，则只需调用上面创建新行的jquery..第二个是在通过后调用此Add函数时测试它应该从最后一行中删除onChange方法，并将其插入新创建的行中。因此，也许我正在寻找如何访问最后一行中的值并修改或检查它们。我们的示例工作得非常好。唯一的一点是，当最后一行更改时，它会添加一个新行。如果它同时检查下拉列表，那将非常好要更改的值..我将默认值设置为“仅选择”，因此可以检查这两个下拉列表中的值是否为其他值，然后插入新行。我使用了on而不是live，因为live已被弃用。