0
동적으로 생성 된 테이블이 있습니다. 사용자는 표에있는 객체를 배열에 넣는 버튼을 클릭 할 수 있습니다. 그러면 총 가격을 계산하는 "합계"테이블이 생성됩니다. 이 테이블에서 제거 단추가 있지만 제거 ("X") 단추와 제거 단추 모두를 클릭하면 아무 것도 수행되지 않습니다.동적으로 생성 된 테이블에서 행 제거
는코드는 여기에서 찾을 수 있습니다 :
http://xsltransform.net/3NzcBt2
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">
<xsl:output method = "html" omit-xml-declaration = "no" doctype-system ="http://www.w3.org.TR/xhtml1/DTD/xhtml1-strict.dtd" doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN" />
<xsl:template match = "/data-set">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Basket.css"/>
<title> My Shopping Basket </title>
<xsl:text disable-output-escaping="yes">
<script type="text/javascript">
var basket = [];
// display basket and fill cells
function displaybasket(){
var shoppingBasketTblBody = document.getElementById("shoppingBasketTblBody");
while(shoppingBasketTblBody.rows.length>0) {
shoppingBasketTblBody.deleteRow(0);
}
var basket_total = 0.00;
//populating the table
for(var product in basket){
var removeButton = document.createElement('input');
removeButton.type = 'button';
removeButton.value = 'X';
removeButton.onclick = 'removeItem(this)';
/* could not work out how to implement without using cookies, ran out of time.
var addButton = document.createElement('input');
addButton.type = 'button';
addButton.value = '+';
addButton.onclick = 'addItem';
var minusButton = document.createElement('input');
minusButton.type = 'button';
minusButton.value = '-';
minusButton.onclick = 'minusItem;' */
var row = shoppingBasketTblBody.insertRow();
var cellName = row.insertCell(0);
var cellDescription = row.insertCell(1);
var cellPrice = row.insertCell(2);
var cellAmount = row.insertCell(3)
var cellRemove = row.insertCell(4);
cellPrice.align = "right";
cellName.innerHTML = basket[product].Name;
cellDescription.innerHTML = basket[product].Description;
cellPrice.innerHTML = "£"+basket[product].Price.toFixed(2);
cellAmount.innerHTML = basket[product].Quantity;
cellRemove.appendChild(removeButton);
basket_total += parseFloat(basket[product].Price);
console.log(basket_total);
}
// display total cost
document.getElementById("cart_total").innerHTML="£"+basket_total.toFixed(2);
}
function AddtoCart(name,Description,price, Quantity){
//create product
var item = {};
item.Name = name;
item.Description = Description;
item.Price = parseFloat(price);
item.Quantity = Quantity;
//push to basket
basket.push(item);
//call display basket function
displaybasket();
}
function removeAll() {
basket.length = 0.0;
basket_total = 0.00;
document.getElementById("shoppingBasketTblBody").deleteRow();
}
function removeItem(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("shoppingBasketTblBody").deleteRow(i);
//subtract price of item from basket_total ???
}
/*could not work out how to implement without using cookies, ran out of time.
function addItem() {
}
function minusItem() {
}*/
</script>
</xsl:text>
</head>
<body>
<table>
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<xsl:for-each select="basket">
<tr>
<xsl:variable name="myId" select="@iId" />
<td>
<xsl:value-of select="@id"/>
</td>
<td>
<xsl:value-of select="Product" />
</td>
<td>
<xsl:value-of select="Description" />
</td>
<td>
<xsl:value-of select="stockLevel" />
</td>
<td>
£<xsl:value-of select="price" />
</td>
<td>
<button type="button" onclick="AddtoCart('{Product}','{Description}','{price}','1')">Add one to cart</button>
</td>
</tr>
</xsl:for-each>
</table>
<table id="shoppingBasketTbl">
<thead>
<tr>
<td>
Name
</td>
<td>
Description
</td>
<td>
Price
</td>
</tr>
</thead>
<tbody id="shoppingBasketTblBody">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right" id="cart_total"></td>
<td colspan="3" align="right" id="removeAll"><button type="button" id="remove all" onclick="removeAll" > Remove All </button></td>
</tr>
</tfoot>
</table>
</body>
</html>
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="basket.xsl"?>
<data-set>
<basket id="001">
<Product>Shorts (F) </Product>
<Description>Stone Wash Denim Shorts</Description>
<stockLevel>20</stockLevel>
<price>25.90</price>
</basket>
<basket id="002">
<Product>Bag (F)</Product>
<Description>Leather Shoulder Bag</Description>
<stockLevel>4</stockLevel>
<price>50.45</price>
</basket>
<basket id="003">
<Product>Blouse (F)</Product>
<Description>Vintage Blue Silk Polka Dot Blouse</Description>
<stockLevel>8</stockLevel>
<price>45.99</price>
</basket>
<basket id="004">
<Product>Boots (F)</Product>
<Description>Soft Leather Brown Ankle Boots</Description>
<stockLevel>3</stockLevel>
<price>65.35</price>
</basket>
<basket id="005">
<Product>Belts (F)</Product>
<Description>Woven Finish Fashion Belt</Description>
<stockLevel>15</stockLevel>
<price>21.99</price>
</basket>
<basket id="006">
<Product>Shirt (M)</Product>
<Description>Jacquard Pattern Wrangler Western Shirt</Description>
<stockLevel>19</stockLevel>
<price>34.87</price>
</basket>
<basket id="007">
<Product>Shoes (M) </Product>
<Description>Suede Ankle Boots</Description>
<stockLevel>6</stockLevel>
<price>55.00</price>
</basket>
<basket id="008">
<Product>Trousers (M)</Product>
<Description>Izod Peach Chinos</Description>
<stockLevel>23</stockLevel>
<price>31.75</price>
</basket>
<basket id="009">
<Product>Belt (M)</Product>
<Description>Suede Casual Belt</Description>
<stockLevel>4</stockLevel>
<price>22.98</price>
</basket>
<basket id="010">
<Product>Hat (M)</Product>
<Description>Trilby Style Brown Woven Fix</Description>
<stockLevel>2</stockLevel>
<price>67.80</price>
</basket>
</data-set>
문제를 표시하는 최소한의 예제로 코드를 줄이는 것이 훨씬 좋습니다. 이것은 게시하기 전에 종종 당신을 답으로 이끄는 것이며 그렇지 않다면 대답하는 일을 훨씬 간단하게 만듭니다. 실제 브라우저 마크 업을 게시하는 코드가 아닌 게시하는 것이 훨씬 더 좋습니다. – RobG