代码之家 › 专栏 › 技术社区 › The50

javascript发送元素到addEventListener函数

addeventlistener javascript-events javascript

The50 · 技术社区 · 8 年前

我试图在JS上创建一个简单的篮子,但在为每个表行创建一个删除按钮时遇到了问题。

每次添加新行时,我都会运行init()函数,并在每行的三个单元格上放置事件侦听器。“删除”按钮位于此处:

currentRowDelete.addEventListener('click', deleteRow());

现在的问题是,每当我单击“删除”按钮时,我都会向函数本身获取一个mouseEvent对象,并且不能获取元素的rowIndex。

以下是整个代码: https://jsfiddle.net/rnLcjw7u/123/

我需要在每次单击“删除”按钮时运行deleterow函数。

另外,我只使用普通的JS。

谢谢您。

2 回复 | 直到 8 年前

Luca Kiebel 8 年前

deleteRow() this event.target tr parentElement closest("tr")

function deleteRow(button) {
  let i = this.closest("tr").rowIndex;
  document.querySelector("#productBasket").deleteRow(i);
}

init();
calcTotalSum();

function deleteRow(button) {
  let i = this.closest("tr").rowIndex;
  document.querySelector("#productBasket").deleteRow(i);
}

function init() {
  document.querySelector('.addNewRow').addEventListener('click', addNewRow);
  var rows = document.querySelector('#productBasket').rows;
  var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {
    var input = rows[i];
    var val = input;
    var currentRowQuantity = val.cells[1].children.quantity;
    var currentRowPrice = val.cells[2].children.price;
    var currentRowDelete = val.cells[3].children[0];

    currentRowQuantity.addEventListener('change', calcTotalSum);
    currentRowPrice.addEventListener('change', calcTotalSum);
    currentRowDelete.addEventListener('click', deleteRow);
  }
}

function addNewRow() {
  var row = document.querySelector('#productBasket').insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = '<input class="text" type="text" name="title">';
  cell2.innerHTML = '<input class="quantity" type="number" name="quantity">';
  cell3.innerHTML = '<input class="price" type="number" name="price">';
  cell4.innerHTML = '<input type="button" class="delete" value="Delete">';
  init();
}

function calcTotalSum() {
  var totalSum = 0;
  var rows = document.querySelector('#productBasket').rows;
  var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {
    var input = rows[i];
    var val = input;

    var currentRowQuantity = val.cells[1].children.quantity.value;
    var currentRowPrice = val.cells[2].children.price.value;

    totalSum += currentRowQuantity * currentRowPrice;
  }

  document.querySelector('.totalPrice').textContent = totalSum;
}

<div class="cartMain">
  <div class="productRow">
    <table id="productBasket" style="width:100%">
      <tr>
        <th>Title</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>

      <tr id="productsList">
        <td><input value=t est class="text" type="text" name="title"></td>
        <td><input value=2 class="quantity" type="number" name="quantity"></td>
        <td><input value=2 0 class="price" type="number" name="price"></td>
        <td><input type="button" class="delete" value="Delete"></td>
      </tr>
    </table>

    <button class="addNewRow" type="button">Add new product</button>

    <p>Total price:</p>
    <div class="totalPrice"></div>
  </div>
</div>

Unmitigated 8 年前

deleteRow

delete

init();
calcTotalSum();

function deleteRow(button) {
	var i = button.rowIndex;
  var p = button.parentElement;
  try{
  p.parentNode.parentNode.removeChild(p.parentNode);
  } catch(err){}
  //document.querySelector("#productBasket").deleteRow(i);
}

function init(){
document.querySelector('.addNewRow').addEventListener('click', addNewRow);
	var rows = document.querySelector('#productBasket').rows;
	var rowLength = rows.length;

  for (var i = 1; i < rowLength; i++) {   
    var input = rows[i];
    var val = input;  
    var currentRowQuantity = val.cells[1].children.quantity;
    var currentRowPrice = val.cells[2].children.price;
    var currentRowDelete = val.cells[3].children[0];
    
    currentRowQuantity.addEventListener('change', calcTotalSum);
  	currentRowPrice.addEventListener('change', calcTotalSum);
    //currentRowDelete.addEventListener('click', deleteRow(currentRowDelete));
    setDelete();
  }
  
}

function setDelete(){
  var deleteBtns = document.querySelectorAll(".delete");
  for(let i = 0; i < deleteBtns.length; i++){
  	deleteBtns[i].addEventListener("click", function(){
    deleteRow(deleteBtns[i]);
    });
  }
}

function addNewRow(){
    var row = document.querySelector('#productBasket').insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    
    cell1.innerHTML = '<input class="text" type="text" name="title">';
    cell2.innerHTML = '<input class="quantity" type="number" name="quantity">';
    cell3.innerHTML = '<input class="price" type="number" name="price">';
    cell4.innerHTML = '<input type="button" class="delete" value="Delete">';
    setDelete();
}

function calcTotalSum() {
	var totalSum = 0;
	var rows = document.querySelector('#productBasket').rows;
	var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {    
    var input = rows[i];
    var val = input;
    
    var currentRowQuantity = val.cells[1].children.quantity.value;
    var currentRowPrice = val.cells[2].children.price.value;
    
    totalSum += currentRowQuantity * currentRowPrice;
  }
    
  document.querySelector('.totalPrice').textContent = totalSum;
}

<div class="cartMain">
  <div class="productRow">
      <table id="productBasket" style="width:100%">
        <tr>
          <th>Title</th>
          <th>Quantity</th> 
          <th>Price</th>
        </tr>
        
        <tr id="productsList">
          <td><input value = test class="text" type="text" name="title"></td>
          <td><input value = 2 class="quantity" type="number" name="quantity"></td> 
          <td><input value = 20 class="price" type="number" name="price"></td>
          <td><input type="button" class="delete" value="Delete"></td>
        </tr>
      </table>
      
      <button class="addNewRow" type="button">Add new product</button>
            
      <p>Total price:</p> 
      <div class="totalPrice"></div>
  </div>
</div>