添加到UI中插入表+行

Question

描述

我在表格中有一张桌子。考虑class="maintable"有三行的情况。子表显示一行中的添加和删除按钮，因此我们可以在子表中添加和删除行。

但是当class="maintable"有一行且子表为空时，会出现问题。我想通过添加按钮将值添加到子表中。

错误

当子表为空时，我们不应该看到它。相反，我们需要通过单击“添加”按钮在空行时插入行。

如果子表值是一行，我需要主表级别的添加按钮，然后单击添加按钮添加“行”。 如果行的子表值为空，则单击“添加”以插入“相同的子表+行。

如果您有任何疑问，请告诉我。

这是标记和JS。

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="maintable">
    <tr>
        <td><b>Pos</b></td>
        <td><b>NICOMATIC P/N</b></td>
        <td><b>Client P/N</b></td>
        <td><b>Quantity Ordered</b></td>
        <td><b>Requested Date &nbsp;</b></td>
        <td><b>Discount</b></td>
        <td><b>Unit Price &nbsp;</b></td>
        <td>Add</td>
    </tr>
    <tr>
        <apex:variable value="{!1}" var="rowNum"/>
        <apex:repeat value="{!q1}" var="i">
            <table cellspacing="0" cellpadding="0" border="1" width="90%" >
                <tr>
                    <td>
                        <apex:outputText value="{!FLOOR(rowNum)}" style="align:center;"/>
                    </td>
                    <td class="tdCustom">
                        <apex:outputField value="{!i.name}" /><apex:inputtext />
                    </td>
                    <td class="tdCustom">
                        <apex:outputField value="{!i.Client_P_N__c}" /><apex:inputtext />
                    </td>
                    <td class="tdCustom" style="width:100px;">
                        <apex:repeat value="{!i.order_batch__r}" var="obr">
                            <table id="table-data" border="1">
                                <tr class="tr_clone">
                                    <td><apex:inputField value="{!obr.Quantity_Ordered__c}" /></td>
                                    <td><apex:inputField value="{!obr.Requested_Date__c}" /></td>
                                    <td><apex:inputField value="{!obr.Discount__c}" /></td>
                                    <td><apex:inputField value="{!obr.Unit_price__c}" /></td>
                                    <td><input type="button" value="Delete" onclick="deleteRow(this)" class="tr_clone_delete"/></td>
                                    <td class="tdCustom"><input type="button" name="add" value="Add" class="tr_clone_add"/></td>
                                </tr>
                            </table>
                        </apex:repeat>
                    </td>
                </tr>
            </table>
            <apex:variable var="rowNum" value="{!rowNum + 1}"/>
        </apex:repeat>
    </tr>
</table>

的JavaScript

<script>
    $("input.tr_clone_add").live('click', function() {
        var $tr    = $(this).closest('.tr_clone');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
    });

    $(document).ready(function(){
      $(".tr_clone_delete").live('click', function() {
          var $tr = $(this).closest('tr');
          $tr.remove();
      });
    });
</script> 

这是小提琴http://jsfiddle.net/4L89kt9v/