Я пытаюсь добавлять и удалять строки в нескольких таблицах.У меня это работает для одной таблицы, но когда я добавляю больше таблиц, кнопка добавления строки для таблицы 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>
Если вы удалите 2-ю таблицу и скрипт, вы будетепосмотрим, что я ожидаю увидеть для каждой таблицы.Я ожидаю, что Add Rows для размера L будет в первой (L) таблице, а Add Rows для размера XL будет во второй (XL) таблице.
Если есть более элегантный способ справиться с этим, я бы с удовольствием попробовал.Я должен получить информацию о персонализации для размеров Youth XS до 5XL для взрослых, но предположим, что, если я смогу заставить его работать на 2, он будет работать на больше размеров.