如何在clone()中的复选框中取消选中.insertAfter jQuery

本文关键字：取消 复选框 insertAfter jQuery clone | 更新日期: 2023-09-27 18:21:23

我想复制整行，但单击添加按钮时未选中复选框。（在我的代码中，如果我选中FOC复选框，当我单击添加时，它会使用FOC复选框复制行）。

在asp.net中，

<table id="tblitems" cellpadding="0" cellspacing="0" border="0" class="additemtb">
  <tbody>
    <tr>
      <th>Item Name</th>
      <th>Item Code</th>
      <th>Unit Price</th>
      <th>Qty</th>
      <th>UOM</th>
      <th>Amount</th>
      <th>Minimal Order Qty</th>
      <th>FOC</th>
      <th></th>
    </tr>
    <tr>
      <td style="width:190px;"></td>
      <td>
         <asp:TextBox ID="TxtBox_ItemCode" CssClass="classItemCode readonly" Columns="8" runat="server" ></asp:TextBox>
      </td>
      <td style="white-space:nowrap">
         <input type="text" id="txtunitprice" name="txtunitprice" class="classUnitPrice number readonly" style="width:50px;" />
         <input type="hidden" id="hidunitprice" name="hidunitprice" class="classUnitPrice2" />
         <asp:Label ID="lblCurrency" runat="server" CssClass="classCurrency" />
         <input type="hidden" id="hidcurrencyid" name="hidcurrencyid" class="classCurrencyID" />
       </td>
       <td>
         <input type="text" id="txtqty" name="txtqty" class="classQty number decimaltextbox" style="width:50px" onkeyup="calculateAmount(this);" onblur="minamt(this);calculateAmount(this);" />
       </td>
       <td>
         <asp:TextBox ID="TxtBox_UOM" CssClass="classUOM readonly" Columns="5" runat="server" ></asp:TextBox>
       </td>
       <td style="white-space:nowrap">
         <asp:TextBox ID="TxtBox_Amount" CssClass="classAmount number readonly" Columns="8" runat="server"></asp:TextBox>
         <asp:Label ID="Label1" runat="server" CssClass="classCurrency2" />
       </td>
       <td>
         <input type="text" id="txtminorderqty" name="txtminorderqty" class="minorderqty number readonly" style="width:60px;background:none;border:none;font-weight:bold;color:Red;" />
       </td>
       <td style="width:1px">
         <input type="checkbox" id="chkFOC" name="chkFOC" class="classFOC btnborder" onclick="calculateFOC(this);" />
         <input type="hidden" name="hidFOC" id="hidFOC" class="classFOC2" value="false" />
       </td>
       <td style="width:90px;">
         <a href="javascript:void(0)" class="copy" onclick="copyRow(this);">Copy</a>
         <a href="javascript:void(0)" class="delete" onclick="removeRow(this);">delete</a>
         <a href="javascript:void(0)" class="add" onclick="addRow(this)">add</a>
       </td>
     </tr>
     <tr>
        <td colspan="4" class="darkgray">
          <span class="classOverBudget chinese" >Purchase Order Amount is over limited budget.</span>
        </td>
        <td class="darkgray" style="text-align:right; font-weight:bold; white-space:nowrap">Total Amount</td>
        <td class="darkgray" >
          <asp:TextBox ID="txtTotalAmount" CssClass="classTotalAmount number readonly" Columns="8" runat="server" ></asp:TextBox>
          <asp:Label ID="Label2" runat="server" CssClass="classCurrency3" />
        </td>
        <td colspan="3" class="darkgray">&nbsp;</td>
      </tr>
    </tbody>
  </table>

在Javascript中，

function addRow(name, selected){
  $(name).parent().parent().next('tr').find('.classFOC:checked').attr('checked', false); 
  $(name).parent().parent().clone().insertAfter($(name).parent().parent());
  //adding remove function to next siblings
  $(name).parent().parent().next('tr').find(".delete").attr('onclick', 'removeRow(this)');
  selected = $(name).parent().parent().find(".mcdropdown input:hidden").val();
  //list of textbox or inputs elements to be empties
  $(name).parent().parent().next('tr').find("input").val('');
  $(name).parent().parent().next('tr').find(".classCurrency").text('');
  $(name).parent().parent().next('tr').find(".classCurrency2").text('');
  $(".promotion-container").css("height", $("#left").innerHeight() - 42 + "px");

  FormActionControl();
}

如何在clone()中的复选框中取消选中.insertAfter jQuery

您似乎在说，您不能取消选中新行中的复选框，该新行是从带有复选框的现有行克隆而来的。我认为这可能是因为试图这样做的代码行在实际创建新行的行之前。因此，简单地将函数中第一行的顺序切换到第二行可能会解决问题，但函数中的代码非常可怕，可以清理很多。

据我所知，addRow()函数正试图找到单击的添加按钮所属的父TR元素，克隆该行，然后取消选中新行中的任何复选框，并将新行中的其他字段设置为空。

下面这样的东西可能会起作用——这基本上是你代码的清理版本，除了：

  • 带有复选框的新行是在尝试取消选中任何内容之前创建的
  • 无论你有$(name).parent().parent()，我都在使用一个新的变量$currentTR——这不仅更有效，而且可读性提高了500%
  • 无论您在哪里有$(name).parent().parent().next('tr')，您似乎都在尝试访问新添加的行，那么为什么不在创建新行时立即保留对它的引用呢？我已经使用新的变量$newTR完成了此操作

因此：

function addRow(name, selected){
  var $currentTR = $(name).parent().parent(),
      $newTR = $currentTR.clone();
  $newTR.insertAfter($currentTR);
  $newTR.find('.classFOC:checked').attr('checked', false); 
  //adding remove function to next siblings
  $newTR.find(".delete").attr('onclick', 'removeRow(this)');
  selected = $currentTR.find(".mcdropdown input:hidden").val();
  //list of textbox or inputs elements to be emptied
  $newTR.find("input").val('');
  $newTR.find(".classCurrency, .classCurrency2").text('');
  $(".promotion-container").css("height", $("#left").innerHeight() - 42 + "px");
  FormActionControl();
}

顺便说一句，使用jQuery设置内联onclick处理程序不是一个好计划，但我认为修复它超出了您所要求的范围。

还要注意的是，您的函数有一个名为selected的参数，该参数在函数中被分配了一个值，但尽管这不会导致错误，但它也不会做任何有用的事情，因为首先JavaScript会传递值，这样就不会导致函数外的任何内容发生变化，其次，在调用函数时，您甚至不会传递该参数。

相关文章：