Ajouter une ligne sur un tableau html

Fermé
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 24 oct. 2014 à 17:30
Bonjour à tous,

je génère plusieurs tableau html via une boucle for. Ces tableau sont des données de ma bdd mais pour faire plus simple, j'ai recréé un contexte analogue.

Je vous montre le code et je vous explique le problème ensuite.

<html>
    <form action="" method="post" enctype="multipart/form-data">
        <table class="tablo" border="1px">
            <tr>
                <td>test 1</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 2</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 3</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 4</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 5</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
        </table>
        <br/>
        <table class="tablo" border="1px">
            <tr>
                <td>test 1</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 2</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 3</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 4</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
            <tr>
                <td>test 5</td>
                <td class="td"><a href="" class="link">test</a></td>
            </tr>
        </table>
    </form>
</html>


var tablo = document.getElementsByClassName('tablo'),
    test = document.getElementsByClassName('link'),
    td = document.getElementsByClassName('td'); 
     
function funcTest(td1)
{
    return function(e)
    {
        e.preventDefault();
        var parentTd = td1.parentNode.parentNode.parentNode;
         
        td1.innerHTML = '<input type="text" name="test"/>';
        parentTd.innerHTML += '<tr><td><input type="submit" value="Envoyer"/></td></tr>';
    }
}
 
for(i=0; i<test.length; i++)
{
    test[i].addEventListener('click', funcTest(td[i]), false); 
}


Ce que je veux, c'est faire en sorte que lorsque l'on click sur le lien test, un imput apparaisse à la place. ça, ça fonctionne.

Ensuite, je voudrai qu'un tr avec un td soit ajouter à la fin du tableau dans le quel on a cliqué avec un imput type="submit". ça, ça fonctionne mais que pour un click, ce que je voudrai c'est que fonctionne à chaque click autant de fois qu'il y a de lien test.

Si j'enlève un .parentNode à la ligne 10, le code fonctionne à chaque click, mais le problème, c'est qu'a chaque fois, j'ai un tr que s'ajoute avec un submit ce que je ne veux pas.

Voila, c'est tout. J'espère que j'ai été claire dans mes explications.

Merci beaucoup pour votre aide.