0
我有一個單排和幾列的表格，有一個附加行（添加項目）按鈕，克隆說錶行。表格行有一個包含項目SKU的選擇下拉菜單，onChange將從我們的數據庫中提取SKU的產品名稱，立方米和價格，並將其顯示在空列中。增量增加<tr> ID
問題是，當我添加一行並在新行中選擇一個SKU，第一行上的信息發生變化的，而不是排它的上。
實施例：
這裏是使用Javascript：
<script type="text/javascript">
// Adds Cloned Table Row to the Form
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}
// Retrieves Product Name from db
function getProdName(str) {
if (str == "") {
document.getElementById("tableRow").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("prodName").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getProd.php?q="+str,true);
xmlhttp.send();
}
}
// Retrieves Cubic Meters from db
function getCBM(str) {
if (str == "") {
document.getElementById("tableRow").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("cbm").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getCBM.php?q="+str,true);
xmlhttp.send();
}
}
// Retrieves Price from db
function getPrice(str) {
if (str == "") {
document.getElementById("tableRow").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("cost").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getPrice.php?q="+str,true);
xmlhttp.send();
}
}
</script>
這裏是表：
<table width = 100%>
<thead>
<tr>
<th>Add Item</th>
<th>SKU</th>
<th>Item Description</th>
<th>CBM</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Net Price</th>
<!--Not Functional <th>Delete</th>-->
</tr>
</thead>
<tbody>
<?php
echo "<tr id='tableRow'>";
echo "<td width = 10%><input type = 'submit' value = 'Add Item' onClick='Javascript:onClickAdd()'></td>";
echo "<td width = 10%>";
echo "<select name = 'item' onchange = 'getProdName(this.value);getCBM(this.value);getPrice(this.value)'>";
// Retrieves SKUs from db and populates Select Options
$connection = mysql_connect('localhost', 'root', '****');
mysql_select_db('Database');
$sql = mysql_query("SELECT sku FROM inventory");
while ($row = mysql_fetch_array($sql)) {
echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>';
}
echo "</select>";
echo "</td>";
echo "<td width = 30% id = 'prodName'></td>";
echo "<td width = 10% id = 'cbm'></td>";
echo "<td width = 10% id = 'qty'><input type = 'text' size = '5'></td>";
echo "<td width = 10% id = 'cost'></td>";
echo "<td width = 10% id = 'netCost'></td>";
// Not Functional echo "<td width = 10%><input type = 'submit' value = 'Delete'></td>";
echo "</tr>";
echo "<tr>";
echo "<td>Total:</td>";
echo "<td></td>";
echo "<td width = 30%></td>";
echo "<td width = 10% id = 'totalCBM'></td>";
echo "<td width = 10%></td>";
echo "<td width = 10%></td>";
echo "<td width = 10% id = 'totalCost'></td>";
echo "<td width = 10%></td>";
echo "</tr>";
?>
</tbody>
</table>
是否有可能讓每個Select Dropdown對應於它所在的行？
這是因爲當你克隆時，新元素和舊元素的id保持不變，所以它會導致重複的id問題。 – Rohit
非常感謝您的回覆！你有關於如何消除重複的id問題的建議嗎？我正在考慮增加ID，但仍然想出一個執行它的方法。 –