jQuery alle Daten aus ausgewählten Zeilen auswählen

Question

Ich habe eine Tabelle. Ich möchte Name, Nachname, E-Mail von allen ausgewählten Zeilen erhalten (Check ist gesetzt). Vielleicht sind Name, Nachname, E-Mail-Adressen Arrays. Wie kann ich es tun? Ich habe dies versucht:

var tableControl= document.getElementById('mytable'); 
 
$("#btn").click(function() { 
 
    var result = []; 
 
    $('input:checkbox:checked', tableControl).each(function() { 
 
     result.push($(this).parent().next().text()); 
 
    }); 
 
    alert(result); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr>

aber ich bekomme nur die Namen ausgewählt. Wie kann ich die anderen Spalten bekommen?

Answer 1

var tableControl= document.getElementById('mytable'); 
 
    $("#btn").click(function() { 
 
     var result = []; 
 

 
     $('input:checkbox:checked', tableControl).each(function() {   
 
      // Get the entire text 
 
      //alert($(this).closest('tr').children('td').text()); 
 
      //alert($(this).parent().next().find('td').text()); 
 
      // Get each column 
 
      $(this).closest('tr').children('td').each(function(e){ 
 
       alert($(this).text()); 
 
      }); 
 
      result.push($(this).closest('tr').children('td').text()); 
 
     }); 
 
     alert(result); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr> 
 
<button id="btn">Get Data</button>

Answer 2

Dies ist eine mögliche Art und Weise, Dinge zu tun. Ich stelle eine Klasse für jede Art von Spalte ein. Sie können das verwenden, um alle anderen Informationen der geprüften Zeilen herauszufinden.

Beobachten Sie die Konsole. Sie erhalten alle Informationen in einem Objekt, das Sie dann für alles weitere Funktionen verwenden, können Sie es

var tableControl= document.getElementById('mytable'); 
 
    $("#btn").click(function() { 
 
     var result = []; 
 
     $('input:checkbox:checked', tableControl).each(function() { 
 
      var obj={}; 
 
      var parent=$(this).parent().parent(); 
 
      obj.name=(parent.find(".name").text()); 
 
      obj.last=(parent.find(".last").text()); 
 
      obj.country=(parent.find(".country").text()); 
 
      obj.email=(parent.find(".email").text()); 
 
      result.push(obj); 
 
     }); 
 
     console.log(result); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_1">Petya</td> 
 
    <td class="last" id="last_1">L1</td> 
 
    <td class="country" id="country_1">Country1</td> 
 
    <td class="email" id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_2">Kolya</td> 
 
    <td class="last" id="last_2">L2</td> 
 
    <td class="country" id="country_2">Country2</td> 
 
    <td class="email" id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td class="name" id="name_3">Vasya</td> 
 
    <td class="last" id="last_3">L3</td> 
 
    <td class="country" id="country_3">Country3</td> 
 
    <td class="email" id="email_3">Email3</td> 
 
</tr> 
 
<button id="btn">Click</button>

Answer 3

var tableControl= $('#mytable'); 
$("#btn").click(function() { 
    var result = []; 
    tableControl('input[type="checkbox"]:checked').each(function() { 
     var nodeArray = $(this).parents('tr').find('td'); 
     var innerArray = []; 
     for(var i = 1; i < nodeArray.length; i++) { 
      if(nodeArray.hasOwnProperty(i)) { 
       innerArray.push(nodeArray[i].text()); 
      } 
     } 
     if(innerArray.length > 0) { 
      result.push(innerArray); 
     } 
    }); 
    alert(result); 
}); 

bitte versuchen Sie es aus, dies zu tun möchten, habe ich nicht getestet, aber Ich denke, es sollte tun, was du willst.

Answer 4

Sie können etwas wie unten verwenden. Ich habe Ihre innere Abfrage so geändert, dass sie zum übergeordneten Element wechselt und nach Geschwistern sucht.

var tableControl = $('#mytable'); 
 
$("#btn").click(function() { 
 

 
    var result = []; 
 
    $('input:checkbox:checked').each(function(item) { 
 
    $(this).parent().siblings().each(function() {  
 
     result.push($(this).text()) 
 
    }); 
 
    }); 
 
    alert(result) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable" cellpadding="1" border="2"> 
 
<thead> 
 
<tr> 
 
    <td>Check</td> 
 
    <td>Name</td> 
 
    <td>Lastname</td> 
 
    <td>Country</td> 
 
    <td>Email</td> 
 
</tr> 
 
</thead> 
 
<tr> 
 
    <td><input id="check_1" type="checkbox" name="check[]"></td> 
 
    <td id="name_1">Petya</td> 
 
    <td id="last_1">L1</td> 
 
    <td id="country_1">Country1</td> 
 
    <td id="email_1">Email1</td> 
 
</tr> 
 

 
<tr> 
 
    <td><input id="check_2" type="checkbox" name="check[]"></td> 
 
    <td id="name_2">Kolya</td> 
 
    <td id="last_2">L2</td> 
 
    <td id="country_2">Country2</td> 
 
    <td id="email_2">Email2</td> 
 
</tr> 
 
<tr> 
 
    <td><input id="check_3" type="checkbox" name="check[]"></td> 
 
    <td id="name_3">Vasya</td> 
 
    <td id="last_3">L3</td> 
 
    <td id="country_3">Country3</td> 
 
    <td id="email_3">Email3</td> 
 
</tr> 
 
</table> 
 
    <button id ="btn">Click Me</button>

Answer 5

stattdessen eine Taste jedes Mal, wenn Sie Ihre Ergebnisse klicken zusammenzufassen wollen, ich würde vorschlagen, Sie behandeln die Ergebnis Objekt jederzeit eine Checkbox angeklickt wird, macht dies für einen stabileren State und behandelt dynamische Änderungen besser. Betrachten Sie Ihren Code zu ändern aussehen:

var tableControl = $('#mytable'); 

//An object that maps checkbox id to an object containing name, last and email 
var result = {}; 
tableControl.find('input:checkbox').click(function() { 
    var key = $(this).attr('id'); 
    //If checkbox clicked and not checked, then remove object from map 
    if(!$(this).is(":checked")){ 
     delete result[key]; 
     return; 
    } 
    var row = $(this).parent().parent(); 
    //Get children based on the start of the id string 
    var firstName = row.children("td[id^='name']").text(); 
    var lastName = row.children("td[id^='last']").text(); 
    var email = row.children("td[id^='email']").text(); 
    result[key] = { 
    name: firstName, 
    last : lastName, 
    email: email 
    } 
}); 

Auf diese Weise jederzeit eine Checkbox angeklickt wird, widersprechen die Ergebnisse sofort aktualisiert wird den gewünschten Wert zu reflektieren. Das Ergebnis Objekt würde wie folgt aussehen:

{ 
    "check_1": { 
    "name": "Petya", 
    "last": "L1", 
    "email": "Email1" 
    }, 
    "check_2": { 
    "name": "Kolya", 
    "last": "L2", 
    "email": "Email2" 
    }, 
    "check_3": { 
    "name": "Vasya", 
    "last": "L3", 
    "email": "Email3" 
    } 
} 

https://jsfiddle.net/p35kz2u1/6/