web-dev-qa-db-fra.com

Sélectionnez une ligne de la table html et envoyez les valeurs en cliquant sur un bouton

J'ai un tableau HTML où je dois sélectionner une ligne et envoyer son premier identifiant de cellule à un bouton et onclick du bouton envoyer la valeur sélectionnée à une fonction en Javascript. Comment puis-je atteindre cet objectif?

test.html :

<table id="table">
        <tr>
            <td>1 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
        <tr>
            <td>2 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
        <tr>
            <td>3 Ferrari F138</td>
            <td>1 000€</td>
            <td>1 200€</td>

        </tr>
    </table>
    <input type="button" id="tst" value="OK" onclick="fnselect()" />

test.js :

var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
}
function fnselect(){
var $row=$(this).parent().find('td');
    var clickeedID=$row.eq(0).text();
    alert(clickeedID);
}

test.css :

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}

.selected {
    background-color: brown;
    color: #FFF;
}

Ceci est un violon de mon problème JSFIDDLE

Je dois envoyer la première valeur de cellule de la ligne sélectionnée à une fonction javascript. Mais lorsque l'utilisateur sélectionne une ligne et clique sur le bouton "OK", je devrais envoyer la valeur à la fonction. Comment faire ça?

javascriptjqueryhtmlcss
27
user3201640
$("#table tr").click(function(){
   $(this).addClass('selected').siblings().removeClass('selected');    
   var value=$(this).find('td:first').html();
   alert(value);    
});

$('.ok').on('click', function(e){
    alert($("#table tr.selected td:first").html());
});

Démo:

http://jsfiddle.net/65JPw/2/

39
RGS

Vous pouvez accéder au premier élément en ajoutant le code suivant à la fonction highlight

$(this).find(".selected td:first").html()

Code de travail: JSFIDDLE

5
Sunil Hari

vérifier http://jsfiddle.net/Z22NU/12/

function fnselect(){

    alert($("tr.selected td:first" ).html());
}
3
Dev

Ce code ci-dessous donnera la ligne sélectionnée, vous pouvez analyser ses valeurs et l’envoyer à l’appel AJAX.

$(".selected").click(function () {
var row = $(this).parent().parent().parent().html();            
});
0
Nalan Madheswaran