如何为多个表添加行，删除行

Question

我正在尝试在多个表中添加和删除行。我可以在单个表上使用它，但是当我添加更多表时，表1的添加行按钮会将行添加到表2，表1上的添加行按钮更改为删除按钮。

我在网上找到了此代码，并试图对其进行修改以满足我的需求。我有一定的编码经验，但是距离我实际编写应用程序已有10多年的历史。我成功地将.live更改为.on。我已经使用F12尝试调试，并且解决了所有我不确定从这里去哪里的错误。

<!-- ******** Size L ******************************************* -->
<table class="table size">
    <tr><td class="gapSize" colspan="3">L</td></tr>
    <tr>
        <td class="gap">Qty of L</td>
        <td> </td>
        <td class="gap">Personalized L</td>
    </tr>
    <tr>
        <td valign="top"><input type="text" class="sizeQty_L"  name="sizeQty_L" id="sizeQty_L" value="1" size="3" /></td>
        <td>
            <div class="table-repsonsive">
                <table class="table">
                    <tr>
                        <td class="gap">Number</td>
                        <td class="gap">Name or Monogram</td>
                        <td class="gap"> </td>
                    </tr>
                    <tr>
                        <td><input class="sizeNumb_L" name="sizeNumb_L[]" id="sizeNumb_L" type="text" size="3" value="" /></td>
                        <td><input class="sizeName_L" name="sizeName_L[]" id="sizeName_L" type="text" size="20" value="" /></td>
                        <td><input type="button" class="add_L" value="Add Row" /></td>
                    </tr>
                </table>
            </div>
        </td>
        <td valign="top"><input type="text" class="totPersonalize_L" name="totPersonalize_L" id="totPersonalize_L" size="3" value="0" /></td>
    </table>
    <script type="text/javascript">
        $(document).ready(function(){
        var xyz = 1;
        $('body').on('click','.del_L',function(){
            $(this).parent().parent().remove();
            xyz = xyz - 1;
            x = document.getElementById("totPersonalize_L");
            x.value = xyz;
        });
        $('body').on('click','.add_L',function(){
            $(this).val('Delete');
            $(this).attr('class','del_L');
            var appendTxt = "<tr>";
            appendTxt += "<td><input class='sizeNumb_L' name='sizeNumb_L[]' id='sizeNumb_L' type='text' size='3' value='' /></td>";
            appendTxt += "<td><input class='sizeName_L' name='sizeName_L[]' id='sizeName_L' type='text' size='20' value='' /></td>";
            appendTxt += "<td><input type='button' class='add_L' value='Add Row' /></td>";
            appendTxt += "</tr>";
            $("tr:last").after(appendTxt); 
            xyz = xyz + 1;
            x = document.getElementById("totPersonalize_L");
            x.value = xyz;
            maxqty = document.getElementById("sizeQty_L");
            if (maxqty.value == '') {
                alert('Total L is Empty');
            } else {
                if (maxqty.value < x.value) {
                    alert('Personalized L total [ '+ x.value +' ] is greater than Qty of L [ '+ maxqty.value +' ]\n\nQty of L will be updated');
                    maxqty.value = x.value;
                }
            }
        });
    });
</script>
<!-- ******** Size XL ******************************************* -->
<table class="table size">
    <tr><td class="gapSize" colspan="3">XL</td></tr>
    <tr>
        <td class="gap">Qty of XL</td>
        <td> </td>
        <td class="gap">Personalized XL</td>
    </tr>
    <tr>
        <td valign="top"><input type="text" class="sizeQty_XL"  name="sizeQty_XL" id="sizeQty_XL" value="1" size="3" /></td>
        <td>
            <div class="table-repsonsive">
                <table class="table">
                    <tr>
                        <td class="gap">Number</td>
                        <td class="gap">Name or Monogram</td>
                        <td class="gap"> </td>
                    </tr>
                    <tr>
                        <td><input class="sizeNumb_XL" name="sizeNumb_XL[]" id="sizeNumb_XL" type="text" size="3" value="" /></td>
                        <td><input class="sizeName_XL" name="sizeName_XL[]" id="sizeName_XL" type="text" size="20" value="" /></td>
                        <td><input type="button" class="add_XL" value="Add Row" /></td>
                    </tr>
                </table>
            </div>
        </td>
        <td valign="top"><input type="text" class="totPersonalize_XL" name="totPersonalize_XL" id="totPersonalize_XL" size="3" value="0" /></td>
    </table>
    <script type="text/javascript">
        $(document).ready(function(){
        var xyz = 1;
        $('body').on('click','.del_XL',function(){
            $(this).parent().parent().remove();
            xyz = xyz - 1;
            x = document.getElementById("totPersonalize_XL");
            x.value = xyz;
        });
        $('body').on('click','.add_XL',function(){
            $(this).val('Delete');
            $(this).attr('class','del_XL');
            var appendTxt = "<tr>";
            appendTxt += "<td><input class='sizeNumb_XL' name='sizeNumb_XL[]' id='sizeNumb_XL' type='text' size='3' value='' /></td>";
            appendTxt += "<td><input class='sizeName_XL' name='sizeName_XL[]' id='sizeName_XL' type='text' size='20' value='' /></td>";
            appendTxt += "<td><input type='button' class='add_XL' value='Add Row' /></td>";
            appendTxt += "</tr>";
            $("tr:last").after(appendTxt); 
            xyz = xyz + 1;
            x = document.getElementById("totPersonalize_XL");
            x.value = xyz;
            maxqty = document.getElementById("sizeQty_XL");
            if (maxqty.value == '') {
                alert('Total xL is Empty');
            } else {
                if (maxqty.value < x.value) {
                    alert('Personalized XL total [ '+ x.value +' ] is greater than Qty of XL [ '+ maxqty.value +' ]\n\nQty of XL will be updated');
                    maxqty.value = x.value;
                }
            }
        });
    });
</script>

如果删除第二个表和脚本，您将看到我希望为每个表看到的内容。我希望将大小为L的行添加到第一个（L）表中，并将大小为XL的行添加到第二个（XL）表中。

如果有一种更优雅的方式来处理此问题，我想尝试一下。我必须收到有关成人XXL（最大5XL）尺寸的个性化信息，但是假设如果我能将其用于2，它将适用于更多尺寸。

Answer 1

您应该为每个表添加唯一的ID，然后引用该ID在相应表中添加和删除行，

请尝试以下代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table size" id="table_L">
    <tr>
	<td class="gapSize" colspan="3">L</td></tr>
    <tr>
        <td class="gap">Qty of L</td>
        <td> </td>
        <td class="gap">Personalized L</td>
    </tr>
    <tr>
        <td valign="top"><input type="text" class="sizeQty_L"  name="sizeQty_L" id="sizeQty_L" value="1" size="3" /></td>
        <td>
            <div class="table-repsonsive">
                <table class="table">
                    <tr>
                        <td class="gap">Number</td>
                        <td class="gap">Name or Monogram</td>
                        <td class="gap"></td>
                    </tr>
                    <tr>
                        <td><input class="sizeNumb_L" name="sizeNumb_L[]" id="sizeNumb_L" type="text" size="3" value="" /></td>
                        <td><input class="sizeName_L" name="sizeName_L[]" id="sizeName_L" type="text" size="20" value="" /></td>
                        <td><input type="button" class="add_L" value="Add Row" /></td>
                    </tr>
                </table>
            </div>
        </td>
        <td valign="top"><input type="text" class="totPersonalize_L" name="totPersonalize_L" id="totPersonalize_L" size="3" value="0" /></td>
    </table>
    <script type="text/javascript">
        $(document).ready(function(){
        var xyz = 1;
        $('body').on('click','#table_L .del_L',function(){
            $(this).parent().parent().remove();
            xyz = xyz - 1;
            x = document.getElementById("totPersonalize_L");
            x.value = xyz;
        });
        $('body').on('click','#table_L .add_L',function(){
            $(this).val('Delete');
            $(this).attr('class','del_L');
            var appendTxt = "<tr>";
            appendTxt += "<td><input class='sizeNumb_L' name='sizeNumb_L[]' id='sizeNumb_L' type='text' size='3' value='' /></td>";
            appendTxt += "<td><input class='sizeName_L' name='sizeName_L[]' id='sizeName_L' type='text' size='20' value='' /></td>";
            appendTxt += "<td><input type='button' class='add_L' value='Add Row' /></td>";
            appendTxt += "</tr>";
            $("#table_L tr:last").after(appendTxt); 
            xyz = xyz + 1;
            x = document.getElementById("totPersonalize_L");
            x.value = xyz;
            maxqty = document.getElementById("sizeQty_L");
            if (maxqty.value == '') {
                alert('Total L is Empty');
            } else {
                if (maxqty.value < x.value) {
                    alert('Personalized L total [ '+ x.value +' ] is greater than Qty of L [ '+ maxqty.value +' ]\n\nQty of L will be updated');
                    maxqty.value = x.value;
                }
            }
        });
    });
</script>


<!-- ******** Size XL ******************************************* -->
<table class="table size" id="table_XL">
    <tr><td class="gapSize" colspan="3">XL</td></tr>
    <tr>
        <td class="gap">Qty of XL</td>
        <td> </td>
        <td class="gap">Personalized XL</td>
    </tr>
    <tr>
        <td valign="top"><input type="text" class="sizeQty_XL"  name="sizeQty_XL" id="sizeQty_XL" value="1" size="3" /></td>
        <td>
            <div class="table-repsonsive">
                <table class="table">
                    <tr>
                        <td class="gap">Number</td>
                        <td class="gap">Name or Monogram</td>
                        <td class="gap"> </td>
                    </tr>
                    <tr>
                        <td><input class="sizeNumb_XL" name="sizeNumb_XL[]" id="sizeNumb_XL" type="text" size="3" value="" /></td>
                        <td><input class="sizeName_XL" name="sizeName_XL[]" id="sizeName_XL" type="text" size="20" value="" /></td>
                        <td><input type="button" class="add_XL" value="Add Row" /></td>
                    </tr>
                </table>
            </div>
        </td>
        <td valign="top"><input type="text" class="totPersonalize_XL" name="totPersonalize_XL" id="totPersonalize_XL" size="3" value="0" /></td>
    </table>
    <script type="text/javascript">
        $(document).ready(function(){
        var xyz = 1;
        $('body').on('click','#table_XL .del_XL',function(){
            $(this).parent().parent().remove();
            xyz = xyz - 1;
            x = document.getElementById("totPersonalize_XL");
            x.value = xyz;
        });
        $('body').on('click','#table_XL .add_XL',function(){
            $(this).val('Delete');
            $(this).attr('class','del_XL');
            var appendTxt = "<tr>";
            appendTxt += "<td><input class='sizeNumb_XL' name='sizeNumb_XL[]' id='sizeNumb_XL' type='text' size='3' value='' /></td>";
            appendTxt += "<td><input class='sizeName_XL' name='sizeName_XL[]' id='sizeName_XL' type='text' size='20' value='' /></td>";
            appendTxt += "<td><input type='button' class='add_XL' value='Add Row' /></td>";
            appendTxt += "</tr>";
            $("#table_XL tr:last").after(appendTxt); 
            xyz = xyz + 1;
            x = document.getElementById("totPersonalize_XL");
            x.value = xyz;
            maxqty = document.getElementById("sizeQty_XL");
            if (maxqty.value == '') {
                alert('Total xL is Empty');
            } else {
                if (maxqty.value < x.value) {
                    alert('Personalized XL total [ '+ x.value +' ] is greater than Qty of XL [ '+ maxqty.value +' ]\n\nQty of XL will be updated');
                    maxqty.value = x.value;
                }
            }
        });
    });
</script>