Question

我有一个动态创建的表。用户可以单击表中将对象放入数组的按钮。然后，这将创建一个计算总价的“总计”表。我已删除此表上的按钮，但单击时删除（“X”）和“全部删除”按钮都不执行任何操作。

代码可以在这里找到：

<?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">
    &lt;script type=&quot;text/javascript&quot;&gt;

    var basket = [];

    // display basket and fill cells
    function displaybasket(){
      var shoppingBasketTblBody = document.getElementById(&quot;shoppingBasketTblBody&quot;);
      while(shoppingBasketTblBody.rows.length&gt;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 = &quot;right&quot;;
        cellName.innerHTML = basket[product].Name;
        cellDescription.innerHTML = basket[product].Description;
        cellPrice.innerHTML = &quot;£&quot;+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(&quot;cart_total&quot;).innerHTML=&quot;£&quot;+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(&quot;shoppingBasketTblBody&quot;).deleteRow();
    }

    function removeItem(r) {
      var i = r.parentNode.parentNode.rowIndex;
      document.getElementById(&quot;shoppingBasketTblBody&quot;).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() {

    }*/ 

  &lt;/script&gt;
  </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>

Answer 1

该行：

removeButton.onclick = 'removeItem(this)';

只需将一个字符串分配给onclick属性，您需要分配一个函数引用：

removeButton.onclick = removeItem;

然后在 removeItem 函数中，这个将是按钮：

function removeItem() {
  var r = this;
  var i = r.parentNode.parentNode.rowIndex; // button -> cell -> row
  document.getElementById(&quot;shoppingBasketTblBody&quot;).deleteRow(i);
}

您可能会发现使用以下方法删除按钮更容易：

var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);

删除对 getElementById 的依赖。但你仍然依赖于DOM结构。

从动态生成的表中删除行

1 个答案: