Obtenez de ligne lors de la vérification de case à cocher dans le tableau html

J'ai un tableau HTML avec une case à cocher dans l'une des colonnes. Je veux savoir comment je pourrais obtenir les données de ligne lorsque l'utilisateur clique sur la case avec le javascript (sans jquery)? Quelqu'un peut-il m'aider avec ça?

Grâce

Pouvez-vous montrer ce que vous avez fait jusqu'à présent? Peut-être que dans un JSFiddle?

OriginalL'auteur user1145581 | 2013-08-28

  1. 3

    Vous pouvez essayer quelque chose comme ceci:

    HTML:

    <table>
    <thead>
        <tr><th></th><th>Row Text</th></tr>
    </thead>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test 2</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>Test 3</td>
    </tr>
</table>

    JavaScript:

    checkboxes = document.getElementsByTagName("input"); 

for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = function() {
        var currentRow = this.parentNode.parentNode;
        var secondColumn = currentRow.getElementsByTagName("td")[1];

        alert("My text is: " + secondColumn.textContent );
    };
}

    JSFiddle: http://jsfiddle.net/markwylde/wzPHF/1/

    OriginalL'auteur Mark

  2. 3

    DOM HTML résout votre problème

    <script type="text/javascript">
    function getRow(n) {
        var row = n.parentNode.parentNode;
        var cols = row.getElementsByTagName("td");
        var i=0;
        while (i < cols.length) {
            alert(cols[i].textContent);
            i++;
        }
    } 
</script>

<table>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)"  /></td>
        <td>aaa</td>
        <td>bbb</td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)" /></td>
        <td>ccc</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="getRow(this)" /></td>
        <td>eee</td>
        <td>fff</td>
    </tr>
</table>

    EDIT:
    ce script va vous aider plus, je pense que:

        function getRow(n) {
    var row = n.parentNode.parentNode;
    var cols = row.getElementsByTagName("td");
    var i = 0;

    while (i < cols.length) {
        var val = cols[i].childNodes[0].nodeValue
        if (val != null) {
            alert(val);
        }
        i++;
    }

    OriginalL'auteur Harutyun Imirzyan

  3. 0

    si votre sélection est en td directement, essayez les solutions suivantes:

    sel.onclick = function(){
  row = this.parentNode.parentNode
  //then what you need
}

    Noter que vous devez d'abord trouver sel avec l'un ou l'autre document.getElementById() ou d'un document.getElementsByTagName()

    Aussi, vous pouvez avoir besoin pour gérer l'événement onchange au lieu de onclick

    OriginalL'auteur Nickolay Kondratenko

  4. 0

    Cela vous donnera le contenu de la ligne, directement(tous td tr)
    HTML:

    <table>
    <tr id="tr1">
        <td>
            <input type="checkbox" value="chkbox1" id="chk1">
        </td>
        <td>
            Lorem ipsum text
        </td>
    </tr>
    <tr id="tr2">
        <td>
            <input type="checkbox" value="chkbox2" id="chk2">
        </td>
        <td>
            Lorem ipsum text
        </td>
    </tr>
</table>

    Jquery:

    $(document).ready(function(){
    $('#chk1, #chk2').on('change',function(){
            if($('#chk1').prop('checked') || $('#chk2').prop('checked'))
            {
                var ids=$(this).parent().parent().html();
                alert(ids);
            }
            else
            {
            }
        });
    })

    OriginalL'auteur Prasad

  5. 0

    si vous êtes nouveau :

    ÉVÉNEMENT onChange de la case à cocher qui fera appel à la fonction que j'ai nommé "vérification"

    il va envoyer ".checked", ce qui signifie, enverra Vrai ou faux à la fonction de "recherche", Puis-je aller dans la fonction obtenir que Vrai ou Faux qui a été envoyé, et le mettre dans une variable que j'ai appelé "temp".

    HTML: onchange="vérification de la ce.vérifié)" <--- l'envoi : "Cette.vérifié" (= l'objet qui crée l'Événement onchange, et .vérifié, est la propriété)
    vous pouvez même envoyer plusieurs informations comme celle-ci : onchange="vérification de la ce.cochée,cette.id)" et ainsi de suite.

    JAVASCRIPT :fonction de contrôle(temp) <--- c'est la façon dont il obtient le "cette.vérifié" dans le HTML, et le mettre dans la variable temp.
    pour recevoir des infos : la fonction de vérification(temp,temp2) et ainsi de suite.(nommez comme vous voulez)

    puis-je exécuter un " SI " avec la variable "temp" et si la valeur = true, puis procédez de l'alerte.

    Espère que cela aide, de penser et de travailler de sorte qu'il correspond à ce dont vous avez besoin !

    HTML : 

    <table>
        <tr>
                <td>
                        <input type="checkbox" value=""onchange="checking(this.checked)">
                </td>
                <td>
                        <label>Something Here</label>
                </td>
        </tr>
</table>

    JAVASCRIPT : 

                function checking(temp)
            {

                if(temp == true)
                {
                    alert("Checkbox is checked");
                }
                else
                {
                    alert("Checkbox is NOT checked");
                }
            }

    OriginalL'auteur captainpoop