Help with table and Row

JavaScript
#1

Hi,
I’m new to Javascript, it’s my first project on it.

I need to build a website with 80 row and 5 columns which I did on HTML. Now for the last column for each row, I need to be able to press a button that will disappears, show me 3 differents buttons and show input on each column to replace the data of the line. One button will be to enter the modification, the other to delete the row and the last one to cancel the operation. Also, I need to be able to do that on every new row that I add.

I’m completely lost because in my head I need to make a function for each line and associate an id for each line to do that. Sorry if I’m not explaining the problem very well but I have been stuck for hours on this problem.

Hopefully someone can help me.
Thanks you, and if you need more information or want to call me stupid, just do!

#3

Thanks,
I’m lost so I haven’t done much.

I tried hiding a button and make another one appear with this:

function afficherBtn()
{
    document.getElementsByClassName("showBtn").innerHTML = "";
    document.getElementsByClassName("hiddenValider").style.display = 'block';
    }

But it doesn’t seem to work.
Also, I just don’t know how to only specify the row I want to change, that’s my big problem right now. Like only make the modify button on row 5 modify row 5 things.

#4

You can simply use a selector for that, a unique ID, a data attribute, or select the element through the event.
It all depends on you.

If they have an identifier you can then perform any action only on that.
But this is just a suggestion, there are other methods to achieve the same goal :+1:

#5

But I would need to create a function for each row, right? Or is it possible to create one function who would work for any rows?

Thanks for replying.

#6

You probably want one function that works on any rows,
can you imagine the pain in maintaining multiple functions?

All you need is a differente parameter and you are done

myFunction(id) {
 // do the thing only for row id
}
#7

Let’s say that I have 3 rows with 4 columns.


<tr id=firstRow> 
<td> // 5 times
<tr id=secondRow>
<td> // 5 times
<tr id=thirdRow>
<td> // 5 times

Would it means that I have to enter each rowID in my parameters? And that I would need to ID each column of each row?

Thanks for your help.

#8

Let’s I assume I have the following table. The blurred JavaScript does not have all you are wanting, but it does have two of the features (Delete and Cancel). You should be able to take what I have started and add logic for an Update feature. It will be the more complicated of the actions.

<table id="table1">
<tr>
  <td>row 1 column 1</td>
  <td>row 1 column 2</td>
  <td>row 1 column 3</td>
  <td><button class="showBtn">Click</button></td>
</tr>
<tr>
  <td>row 2 column 1</td>
  <td>row 2 column 2</td>
  <td>row 2 column 3</td>
  <td><button class="showBtn">Click</button></td>
</tr>
<table>

JavaScript

function createEditButtons(parentNode) {
  const buttonsDiv = document.createElement('DIV');
  buttonsDiv.className = 'edit-buttons';
  buttonsDiv.innerHTML = `
    <button class="edit-btn delete">Delete</button>
    <button class="edit-btn cancel">Cancel</button>
  `;
  parentNode.appendChild(buttonsDiv);
  buttonsDiv.children[0].addEventListener('click', handleDelete);
  buttonsDiv.children[1].addEventListener('click', handleCancel);
}

function handleDelete(event) {
  const editButtonsDiv = event.target.parentNode;
  removeEditButtonsEventListeners(editButtonsDiv);
  const clickHandlerBtn = editButtonsDiv.parentNode.querySelector('.showBtn');
  clickHandlerBtn.removeEventListener('click', handleBtnClick);
  const rowToDelete = editButtonsDiv.parentNode.parentNode;
  rowToDelete.parentNode.removeChild(rowToDelete);
}

function handleCancel(event) {
  const editButtonsDiv = event.target.parentNode;
  const lastColumn = editButtonsDiv.parentNode;
  removeEditButtonsEventListeners(editButtonsDiv);
  lastColumn.removeChild(editButtonsDiv);
  lastColumn.firstChild.style.display = 'block';
}

function removeEditButtonsEventListeners(editButtonsDiv) {
  editButtonsDiv.children[0].removeEventListener('click', handleDelete);
  editButtonsDiv.children[1].removeEventListener('click', handleCancel);
}

function handleBtnClick(event) {
  event.target.style.display = 'none';
  createEditButtons(event.target.parentNode);
}

const lastColumnButtons = document.querySelectorAll('.showBtn');
for (let i = 0; i < lastColumnButtons.length; i++) {
  lastColumnButtons[i].addEventListener('click', handleBtnClick);
}

The above is just one of many ways to approach this problem. There are probably better ways, but it is something I put together quickly. Using IDs as suggested or taking advantage of the rowIndex property of the table could lead to some more concise and readable solutions.

1 Like
#9

Thanks for your detailed response,

I tried something else with what I know, but my teacher only spend 2 hours talking about Javascript and I feel like he didn’t talk about many things.

Right now I’m able to specify, I think, the button in the row I want to change with this code:
HTML:

 <td>
                <input type="button" value="Modifier"  onclick="afficherBtn(this)">
                <div style="display:none">
                <input type="button" value="Valider">
                <input type="button" value="Supprimer">
                <input type="button" value="Annuler">
                </div>
</td>

Javascript:

function afficherBtn(element)
{
    element.style.display = 'none';
    element.nextSibling.style.display = 'block';
}

Next sibling doesn’t work and I wonder if there’s a way to make it works.

#10

The nextSibling property is returning a string which happens to be the end of line character, because of the way you wrote your html. If you moved the div element to be next to the input element, then it would do what you are expecting. There is another property named nextElementSibling will have the desired effect without having to change your existing html.

1 Like
#11

Thanks you, it works!
But now when I press Cancel I want to hide the new button and bring back modify, but I’m not able to select the input and make it appear. This is what I tried:
HTML:

td>
                <input type="button" value="Modifier"  onclick="afficherBtn(this)">
                <div style="display:none">
                    <input type="button" value="Validate">
                    <input type="button" value="Delete">
                    <input type="button" value="Cancel" onclick="returnBtn()rBtn(this)">
                </div>
            </td>

Javascript:

function returnBtn(element)
{
    element.parentNode.style.display = 'none';
    let modifyAppear = this.parentNode.parentNode;
    modiyrAppear.style.display = 'block';
}
#12

Not sure what you are trying to accomplish by adding rBtn(this), because I do not see a function namedrBtnfunction in your code. Also, you should be passingthistoreturnBtnand then inside that function, you could usepreviousSiblingElement` in a similar manner as I showed you in the previous reply.

#13

previousStringElement doesn’t work in that case, because what I’m trying to bring back is the modify button which is not the direct previous element. I’m still stuck.

#14

Thanks, I was hitting my mind. you have fixed the issue. Finally I have got result as expected

#15

It defintely does work because that is what I used in a test. It will depend on how you tried to incorporate it into your code. Post your code and we can discuss further.

#16

Well I tried your method that you posted yesterday, but for some reason the selectors doesn’t seem to work. When I press modify nothing happens.
Javascript:

function creerBtn(parentNode)
{
    const divBtn = document.createElement('DIV');
    divBtn.className = 'modifierBtn';
    divBtn.innerHTML = '<button class = "supprimerBtn"> Supprimer</button>  <button class= "annulerBtn"> Annuler </button>';
    parentNode.appendChild(divBtn);
    divBtn.children[0].addEventListener('click', suppression);
    divBtn.children[1].addEventListener('click', annuler);
}

function suppression(event)
{
    const divBtnModifier = event.target.parentNode;
    enleverEcouteEvent(divBtnModifier);
    const btnSupprimerAppuye = divBtnModifier.parentNode.querySelector('.appuiBtn');
    btnSupprimerAppuye.removeEventListener('click', appuiBoutton);
    const ligneSupprimer = divBtnModifier.parentNode.parentNode;
    ligneSupprimer.parentNode.removeChild(ligneSupprimer);
}

function annuler(event)
{
    const divBtnModifier = event.target.parentNode;
    const retourModif = divBtnModifier.parentNode;
    enleverEcouteEvent(divBtnModifier);
    retourModif.removeChild(divBtnModifier);
    retourModif.firstChild.style.display = 'block';
}
function enleverEcouteEvent(divBtnModifier)
{
    divBtnModifier.children[0].removeEventListener('click', suppression);
    divBtnModifier.children[1].removeEventListener('click', annuler);
}

function appuiBoutton(event)
{
    event.target.style.display = 'none';
    creerBtn(event.target.parentNode);
}

const modBtn = document.querySelectorAll('.appuiBtn');
for (let a=0; a < modBtn.length; a++)
{
    modBtn[a].addEventListener('click', creerBtn);
}

HTML:

 <tr>
            <td class="identifiantRandom"> </td>
            <td>...And the Bag's in the River</td>
            <td>3</td>
            <td>Adam Bernstein</td>
            <td><button class="appuiBtn"> Modifier </button></td>
        </tr>
        <tr>
            <td class="identifiantRandom"> </td>
            <td>Cancer Man</td>
            <td>4</td>
            <td>Jim McKay</td>
            <td><button class="appuiBtn"> Modifier </button></td>
        </tr>
#17