增量添加<tr> id
I have a table with a single row and several columns, with an add row (Add Item) button which clones said table row. The table row has a select drop-down menu full of item SKU's, which onChange will pull up the SKU's Product Name, Cubic Meters, and Price from our database and display it in the empty columns.
The problem is when I add a row and select a sku on the new row, the information on the first row changes instead of the row that it's on.
Example:
Here is the 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>
Here is the Table:
<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>
Is it possible to have each Select Dropdown correspond to the row that it is on?
Rewrote the function in Jquery, finally got satisfying results
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Purchase Order Form</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// Retrieves Product Name from db based on selected sku
function getProdName(str) {
if (str == "") {
document.getElementById("").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 based on selected sku
function getCBM(str) {
if (str == "") {
document.getElementById("").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 based on selected sku
function getPrice(str) {
if (str == "") {
document.getElementById("").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();
}
}
$(document).ready(function(){
//add-row
$(".add-row").click(function(){
//sku
var sku = $("#sku").val();
//prodName
var prodName = $("#prodName").text();
//cbm
var cbm = $("#cbm").text();
//qty
var qty = $("#qty").val();
//price
var price = $("#price").text();
//netPrice
var netPrice = $("#netPrice").text();
//markup
var markup = "<tr><td width=10%><input type='checkbox' name='record' size='1'></td><td width=10%>" + sku + "</td><td width=40%>" + prodName + "</td><td width=10%>" + cbm + "</td><td width=10%>" + qty + "</td><td width=10%>" + price + "</td><td width=10%>" + netPrice + "</td></tr>";
$("#ledger").append(markup);
});
// Find and remove selected table rows
//record
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<body>
<form>
<table width=100%>
<tr>
<th width=10%>SKU</th>
<th width=40%>Product Name</th>
<th width=10%>CBM</th>
<th width=10%>Qty</th>
<th width=10%>Price</th>
<th width=10%>Net Price</th>
<th width=10%>Add</th>
</tr>
<tr>
<!--name/sku-->
<td><?php
echo "<select name='item' id='sku' onchange='getProdName(this.value);getCBM(this.value);getPrice(this.value)'>";
$connection = mysql_connect('host', 'user', 'password');
mysql_select_db('ADI');
$sql = mysql_query("SELECT sku FROM inventory");
while ($row = mysql_fetch_array($sql)) {
echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>';
}
echo "</select>";
?></td>
<!--email/prodName-->
<td id="prodName"></td>
<!--cbm-->
<td id="cbm"></td>
<!--qty-->
<td><input type="text" id="qty" placeholder="Quantity" size="3"></td>
<!--price-->
<td id="price"></td>
<!--netPrice-->
<td id="netPrice"></td>
<!--add-row-->
<td><input type="button" class="add-row" value="Add Row" onclick="Javascript: getProdName(); getCBM(); getPrice();"></td>
</tr>
</table>
</form>
<table id="ledger">
<thead>
<tr>
<th width=10%>Select</th>
<th width=10%>SKU</th>
<th width=40%>ProdName</th>
<th width=10%>CBM</th>
<th width=10%>Quantity</th>
<th width=10%>Unit Price</th>
<th width=10%>Net Price</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<!--Delete-Row button-->
<button type="button" class="delete-row" >Delete Row</button>
</body>
</html>
Well duplicate id's is not allowed in html whereas duplicate classes can be allowed so you can give the classes like cost-1 and 1 being dynamic.
now you need to program your logic to write into the correct class that way.
Hope this helps,