我有一段我在苦苦挣扎的代码。当用户单击[+]时，我正在向表中添加更多行。该部分的Javascript正在运行。每行有5个值，我希望将它们加在一起并放在每行的输入字段中。在将第一行添加到数量输入框中时，我取得了一些成功，但是没有添加其他行。
此外，当用户单击[-]删除时，并不会删除所有行。
我在项目的其他部分也有类似的代码，但是这一代码要复杂得多。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Workorder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/workorder.css" />
<style type="text/css" media="screen">
td, th { border: 1px solid #ddd; padding: 2px; vertical-align: top; }
* { box-sizing: border-box; }
.wrapper { max-width: 500px; margin: 2px auto; }
.wrapper > div { border: 1px solid #aaa; border-radius: 2px; background-color: #eee; padding: 0; color: #000; }
.wrapper { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2px; grid-auto-rows: minmax(30px, auto); }
.g-po { grid-column: 1/5; grid-row: 1; }
.g-submit { grid-column: 1/5; grid-row: 2; }
.button { font-size: 18px; }
</style>
</head>
<body class="center">
<form class="form-horizontal" method="post" name="PO" id="PO" action="writePO.php" onsubmit="return validateIndex()">
<!-- *** body ********************************************* -->
<table id="tablePO">
<tr>
<th>QTY Ordered</th>
<th colspan="6"> Description </th>
<th>FOR:</th>
<th>Work Order #</th>
</tr>
<tr>
<td><input type="text" name="qtyOrdered[]" id="qtyOrdered" size="3" value="0" /></td>
<td colspan="6"><input type="text" name="Description[]" id="Description" value="" size="25" /></td>
<td><input type="text" name="for[]" id="for" value="" size="18" /></td>
<td><input type="text" name="workorder[]" id="workorder" value="" size="8" /></td>
</tr>
<tr>
<td rowspan="2"> </td>
<th>YS</th>
<th>YM</th>
<th>YL</th>
<th>YXL</th>
<th><input type="text" name="otherSize[]" size="1" placeholder="other" /></th>
<td rowspan="2"><input type="button" class="add_PO" value="+" /></td>
<td colspan="2" rowspan="2"> </td>
</tr>
<tr>
<td><input type="text" name="YS[]" id="YS" size="1" /></td>
<td><input type="text" name="YM[]" id="YM" size="1" /></td>
<td><input type="text" name="YL[]" id="YL" size="1" /></td>
<td><input type="text" name="YXL[]" id="YXL" size="1" /></td>
<td><input type="text" name="otherSizeQty[]" id="otherSizeQty" size="1" /></td>
</tr>
</table>
<table><tr><td><input type="submit" formmethod="post" class="button[]" value="Submit" /></td></tr></table>
</form>
<script type="text/javascript">
$(document).ready(function(){
var lineCount = 1;
$('body').on('click','#tablePO .del_PO',function(){
lineCount = lineCount - 1;
$(this).parent().parent().remove();
});
$('body').on('click','#tablePO .add_PO',function(){
$(this).val('-');
$(this).attr('class','del_PO'); var appendTxt;
appendTxt += "<tr>\n";
appendTxt += " <td><input type='text' name='qtyOrdered[]' id='qtyOrdered' size='3' value='0' /></td>\n";
appendTxt += " <td colspan='6'><input type='text' name='Description[]' id='Description' value='' size='25' /></td>\n";
appendTxt += " <td><input type='text' name='for[]' id='for' value='' size='18' /></td>\n";
appendTxt += " <td><input type='text' name='workorder[]' id='workorder' value='' size='8' /></td>\n";
appendTxt += "</tr>\n";
appendTxt += "<tr>\n";
appendTxt += " <td rowspan='2'> </td>\n";
appendTxt += " <th>YS</th>\n";
appendTxt += " <th>YM</th>\n";
appendTxt += " <th>YL</th>\n";
appendTxt += " <th>YXL</th>\n";
appendTxt += " <th><input type='text' name='otherSize[]' size='1' placeholder='other' /></th>\n";
appendTxt += " <td rowspan='2'><input type='button' class='add_PO' value='+' /></td>\n";
appendTxt += " <td rowspan='2'> </td>\n";
appendTxt += " <td rowspan='2'> </td>\n";
appendTxt += "</tr>\n";
appendTxt += "<tr>\n";
appendTxt += " <td><input type='text' name='YS[]' id='YS' size='1' /></td>\n";
appendTxt += " <td><input type='text' name='YM[]' id='YM' size='1' /></td>\n";
appendTxt += " <td><input type='text' name='YL[]' id='YL' size='1' /></td>\n";
appendTxt += " <td><input type='text' name='YXL[]' id='YXL' size='1' /></td>\n";
appendTxt += " <td><input type='text' name='otherSizeQty[]' id='otherSizeQty' size='1' /></td>\n";
appendTxt += "</tr>\n";
$("#tablePO tr:last").after(appendTxt);
var YS = Number(document.getElementById("YS").value);
var YM = Number(document.getElementById("YM").value);
var YL = Number(document.getElementById("YL").value);
var YXL = Number(document.getElementById("YXL").value);
var otherSizeQty = Number(document.getElementById("otherSizeQty").value);
var totQty = document.getElementById("qtyOrdered");
var totOrdered = YS + YM + YL + YXL + otherSizeQty;
totQty.value = totOrdered;
lineCount = lineCount + 1;
});
});
</script>
</body>
</html>
谢谢， 艾丽莎