DEMO

Question

我的内容如下表

<table id="oChild" class="table table-striped table-bordered">
<tr>                    
<td><bean:message bundle="masterResource" key="lbl.Document"/></td>
<td colspan =""><bean:message bundle="masterResource" key="lbl.DocumentType"/></td>
<td><bean:message bundle="masterResource" key="lbl.Mandatory"/></td>
<td><bean:message bundle="masterResource" key="lbl.Available"/></td>
<td><bean:message bundle="masterResource" key="lbl.DocumentDate"/></td>
<td><bean:message bundle="masterResource" key="lbl.DocComment"/></td>
<td width="5%">
<button tabindex="8" type="button" name="imgSU" title="Add The Grade" class="btn btn-primary" onclick="fnAddNew('','','','');">Add New</button>
</td>
</tr>
<tr id="DocumentRow" style="">  
<td id="" style="">
<SELECT name="cboDocument1" class="form-control chosen-select" onchange="">
<OPTION>-- Select --</OPTION>
<OPTION></OPTION>
</SELECT>   
</td>
<td id="" style="">
<SELECT name="cboDocumentType1" class="form-control chosen-select" onchange="">
<OPTION>-- Select --</OPTION>
<OPTION></OPTION>
</SELECT>
</td>
<td width="5%">
<input type="checkbox" class="btn btn-default mr20" name="txtMandatory1" onClick="" />
</td>
<td width="5%">
<input type="checkbox" class="btn btn-default mr20" name="txtAvailable1" onClick="" />
</td>
<td width="10%">
<input class="form-control" id="txtDateFrom" data-provide="datepicker" type="text" readonly name="txtDocumentDate1" value="" size="" maxlength="">
</td>
<td>
<textarea rows="4" cols="60" onchange="" name="txtOthCovComments" class="combo" onkeypress=""></textarea>
</td>
<td>
</td>
</tr>
</table>

我希望在点击第一行中的“添加新按钮”后，在同一个表中添加与第二行中相同内容相同的行

以及如何更改或增加表单引用参数，如cboDocument1，cboDocument2，cboDocument3 txtMandatory1，txtMandatory2，txtMandatory3

还有一个如何在第一行中为空的最后一个td中添加图像和功能请帮忙

Answer 1

试试这个：

$('.btn').click(function(){
 var t = $('#oChild');
 var clone = t.find('#DocumentRow').clone(true);
 clone.attr('id','');
 t.append(clone);
});

确保删除克隆元素的ID。在多个元素上具有相同的ID无效。

演示：http://jsfiddle.net/lotusgodkk/Wu2Gh/3/

Answer 2

这可以解决这个问题吗？

function cloneSecondRowAndAddToTheBottomOfTheTable() {
    var $rowClone = $($("table#oChild tr")[2]).clone();
    $("table#oChild").append($rowClone);
}

Answer 3

给你的按钮id="add-new"并试试这个：

$("#add-new").on("click", function() {
   $tr = $(this).closest("tr").next().clone();    
   $tr.insertAfter($(this).closest("tr"));   
});

DEMO

Answer 4

尝试以下

<script>
    $(document).ready(function(){
        $("button[name='imgSU']").click(function(){
        var trClone = $('#oChild tr#DocumentRow').clone(true);
        $(trClone).attr('id',''); 
        $('#oChild tr:first').before(trClone);
        });
    });
</script>

见工作fiddle

Answer 5

  $(document).on('click', '.remove_slot', function () {
     if(confirm("Do  you really want tor remove this  row.. ?"))
     {   // where "#add_newrow" is a id of table 
      $(this).closest('tr').remove();
        $("#add_newrow").append('<tr><td> what </td> <td>ever </td> <td>you want </td></tr>');  
           }
     return false;
 });

//代码首先删除当前选定的行，然后追加新行

使用jquery克隆表行

5 个答案:

DEMO