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.

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.

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';
}
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

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>