Question

我想复制整行，但是在点击添加按钮时取消选中复选框。（在我的代码中，如果我选中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();
}

Answer 1

您似乎在说，您无法取消选中使用已选中复选框从现有行克隆的新行中的复选框。我认为这可能是因为尝试执行此操作的代码行之前实际创建新行的行。因此，简单地将第一个顺序切换到函数中的行可以修复它，但是函数中的代码非常可怕，可以清理批次。

据我所知，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会按值传递所以这不会导致函数外部的任何变化，其次你甚至不会在调用函数时传递该参数。

如何取消选中clone（）中的复选框.insertAfter jQuery？

1 个答案: