Question

我正在尝试从模板克隆选定值的行。我还想在克隆之后重置模板行。

$("CloneButton").click(function() {

 var clonedRow = $('#rowtemplate').clone();
            clonedRow.html($(clonedRow).html().replace(/#/g, index));
            clonedRow.find('.project').text(project);
            clonedRow.find('.billingcodeCssId').val(timeCodeID);
            clonedRow.find('.billingcodeCss').text(timeCode);
            $('#Maintable').append(clonedRow.find('tr'));
});

当我尝试clone the table row JS Fiddle时，选择器没有拿起选择器。选择器有什么问题，如何使用选定值下拉列表来克隆行？

Answer 1

试试这个 您的代码中需要进行许多更改..

您写了$("CloneButton").click(function() { - 它错过了# ID选择器 - 因此您的按钮点击不会触发。您需要写$("#CloneButton").click(function() {
在克隆和追加之前，您需要为两个下拉列表设置selectd属性。您可以使用selected

.attr("selected", true)

下面的代码对我来说很好。 检查工作代码段

$("#CloneButton").click(function() {

var drp1Value = $('#rowtemplate tr').find('select').eq(0).val();
$("option[value=" + drp1Value + "]", $('#rowtemplate tr').find('select').eq(0))
  .attr("selected", true).siblings()
  .removeAttr("selected");
  

var drp2Value = $('#rowtemplate tr').find('select').eq(1).val();

$("option[value=" + drp2Value + "]", $('#rowtemplate tr').find('select').eq(1))
  .attr("selected", true).siblings()
  .removeAttr("selected");



 var clonedRow = $('#rowtemplate tr').clone(); 
 $('#Maintable').append(clonedRow);           
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h4 >Main Table</h4>

<table id="Maintable" >
<th>Client</th><th>Heading</th><th>Heading</th><th>Total</th><th>Delete?</th>
<tr>
 <td>
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Modeling</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select>
</span>
                                                
 </td>
          <td>
            <input type="hidden" name="Records.Index" value="0">
            <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
            <option value="">Budget-070</option>
            <option selected="selected" value="5">Budget-070</option>
            <option value="6">Budget-784</option>
            <option value="7">Cost Center-027</option>
            </select></span>                                              
          </td>
          <td>
            <input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
            <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
          </td>                                              
         
           <td class="rowtotal">10.00</td>
                                            

           <td>
            <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
           </td>
 </tr>
 <tr>
       <td><span class="project"> 
       <select class="form-control projectcodeid" id="Records" name="Records[1].SelectedProjectFromList"><option value="">Xilinx ISE</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>

</select></span>
                                                
     </td>
     <td>
       <input type="hidden" name="Records.Index" value="1">
       <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_1__SelectedBillingCodesFromList" name="Records[1].SelectedBillingCodesFromList"><option value="">Bill-727                                          </option>
<option value="1">TIME CODE A                                       </option>
<option selected="selected" value="2">Bill-727                                          </option>
<option value="3">Bill-561                                          </option>
<option value="4">Bill-281                                          </option>
</select></span>                                              
      </td>
         <td>
            <input name="Records[1].TimeRecords[0].ID" type="hidden" value="">
            <input class="meters" name="Records[1].TimeRecords[0].Meters" type="text" value="">
         </td>
                                           
                                            <!-- added row totals rowtotalmeters-->
                                            <td class="rowtotal">                                                
                                                0.00
                                            </td>                                            

                                            <td>
                                                <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
                                            </td>
                                        </tr>
                                        
                                        </table>
                                        
          <!--***********    End Main Table-->         
<hr />                            
<h4>Row template</h4>
 
<button type="button" id="CloneButton">Add Clone Row to table!</button>
 
 <table  id="rowtemplate">
<tr>
 <td>
    <span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Default</option>
    <option value="0">Null</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select></span>
                                                
 </td>
          <td>
            <input type="hidden" name="Records.Index" value="0">
            <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
            <option value="">Default</option>
            <option value="0">Null</option>
            <option value="">Budget-070</option>
            <option value="5">Budget-070</option>
            <option value="6">Budget-784</option>
            <option value="7">Cost Center-027</option>
            </select></span>                                              
          </td>
          <td>
            <input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
            <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
          </td>                                              
         
           <td class="rowtotal">0.00</td>
                                            

           <td>
            <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
           </td>
 </tr>

                                        
  </table>

请检查代码段

克隆表行与下拉不工作

1 个答案: