عنصر إرسال JavaScript إلى وظيفة addEventListener

1

أحاول عمل سلة بسيطة على JS وأواجه مشكلة في إنشاء زر حذف لكل صف في الجدول.

أقوم بتشغيل الدالة init () في كل مرة يتم فيها إضافة صف جديد وأضع مستمعي الأحداث على ثلاث من الخلايا في كل صف. زر الحذف هنا:

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

تكمن المشكلة الآن في أنه في كل مرة أقوم فيها بالنقر فوق زر الحذف ، أحصل على كائن MouseEvent إلى الوظيفة نفسها ولا يمكنني أخذ صف الفهرس الخاص بالعنصر.

إليك الكود بالكامل: https://jsfiddle.net/rnLcjw7u/123/

أحتاج إلى تشغيل وظيفة deleteRow عند كل نقرة على زر "Delete".

PS I استخدام JS عادي فقط لهذا واحد.

شكرا جزيلا.

2 الاجابة

3
افضل جواب

انتقلت الحجة إلى الدالة deleteRow() هو كائن يقوم بتنفيذ واجهة الأحداث ، للحصول على الزر الذي قمت بالنقر فوقه ، إما this أو event.target . ما تريده هو rowIndex ، العنصر الوحيد الذي يحتوي على مثل هذا الشيء هو الأقرب tr ، في هذه الحالة parentElementparentElement أو ال 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>

:مؤلف
0

تحتاج إلى تمرير عنصر إلى deleteRow الوظيفة التي يمكنك استخدامها بعد ذلك للحصول على childNode الخاص ب childNode الخاص به لإزالة mainNode الحالية الخاصة به (صف الجدول).

يجب عليك استخدام querySelector للحصول على جميع العناصر بفئة 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>

:مؤلف
فوق
قائمة طعام