个人中心
gpt4 book ai didi

javascript - 从动态生成的表中删除行

转载 作者：行者123 更新时间：2023-12-03 11:05:25 27 4
gpt4 key购买 nike

我有一个动态创建的表。用户可以单击表上的按钮将对象放入数组中。然后创建一个“总计”表来计算总价。我在此表上有“删除”按钮，但单击“删除”(“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">
    &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>

最佳答案

行:

removeButton.onclick = 'removeItem(this)';

只需将一个字符串分配给 onclick 属性，您需要分配一个函数引用，如下所示:

removeButton.onclick = removeItem;

然后在removeItem函数中，this将是按钮:

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 结构的束缚。

关于javascript - 从动态生成的表中删除行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27882339/

27 4 0
文章推荐： javascript - KineticJS 动画形状以转到精确位置
文章推荐： javascript - 获取按钮的背景图像并更改它
文章推荐： javascript - 与 Javascript 共享 PHP session
文章推荐： javascript - 如何检查一个对象中的所有数字是否在某个范围内？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com