CODEWITHSUNDEEP
javascripthtmljsp
willberthos
willberthos

Reputation: 315

How to delete HTML table row with stored <td> index variable

I have a web page that lists multiple rows to a table. Each row has a button that is used to open a confirmation modal if the user wants to remove the row.

Is there any way to pass the row information (index or something) to the submit button element that is outside the table-element and which executes the actual removing function?

I know that <input type="button" value="Delete" onclick="deleteRow(this)"/> would do the trick if its inside the tr-element, but this is not the case.

My HTML code:

            <table id="myTable">
                <tr>
                    <th><fmt:message key="time"/></th>
                    <th><fmt:message key="name"/></th>
                </tr>
                <c:forEach items="${myList}" var="item">
                    <tr>
                        <td>${item.timeStamp}</td>
                        <td>${item.name}</td>
                        <td><input type="button" onclick="openModal"/>Delete</td> //here I want to store this rows index
                    <tr>
               </c:forEach>
            </table>
            <div class="modal-container" id="modal_container">
                <div class="modal">
                    <p>Do you want to remove item?</p>
                    <button type="button" id="close">Cancel</button>
                    <button type="submit" id="remove" onclick="deleteRow(this)">Yes</button> //here I want to use the stored index
               </div>
            </div>

Upvotes: 0

Views: 354

Answers (2)

Agan
Agan

Reputation: 497

You need global valiable to save the row:

var row;

then the function for open the modal and save the row:

// When the user clicks on the button, open the modal and save the row
let openModal = function(scope) {
  modal.style.display = "block";
  row = scope;
}

and then the function to delete the row if user press yes:

// When the user clicks on the yes button, delete the row, close the modal and reset row
function deleteRow() {
  var parent = row.parentNode.parentNode;
  parent.parentNode.removeChild(parent);
  row = "";
  modal.style.display = "none";
}

Your button should open the modal dialog

<td><input type="button" onclick="openModal(this)"/></td>

and if user press yes you call the delete function

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Do you want to remove item?</p>
    <button type="submit" id="remove" onclick="deleteRow()">Yes</button>
  </div>
</div>

on my codepen page i solved this for you.

Upvotes: 1

Adrien Villalonga
Adrien Villalonga

Reputation: 548

I never used Jsp but you can try something like this (vanilla javascript) :

var form = window.querySelector('#myTable');
var buttonSubmit = window.querySelector('#remove'); 

// Events
buttonSubmit.addEventListener('click', submitMe);
form.addEventListener('submit', submitMe);

// Submit function
function submitMe(e) {
  e.preventDefault(); // 'Revoke' current action of the event (use to stop input submit request)
  const formData = new FormData(form);
  formData.append('CustomKey', 'CustomValue');
  // Send new XMLHttpRequest here
}

Some docs :

Upvotes: 1

Related Questions