jQuery選択した行からすべてのデータを選択します。

Question

私はテーブルを持っています。選択したすべての行から名前、姓、電子メールを取得したい（チェックが設定されています）。たぶん名前、姓、電子メールが配列になります。 どうすればいいですか？ 私はこれを試してみた：

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>

しかし、私は名前だけを選択します。他の列はどのように入手できますか？

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

これは物事の1つの可能な方法です。私はすべてのタイプの列に対してクラスを設定しました。これを使って、チェックされた行の他のすべての情報を見つけることができます。

コンソールを観察します。あなたは、私がテストしていませんが、これを試してみてください、あなたはそれが

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

をしたいかもしれませんさらにどんな機能のために使用することができます一つのオブジェクト内のすべての情報を得るが、私はそれがあなたが望むことをするべきだと思います。

Answer 4

次のようなものを使用できます。私は親に行くためにあなたの内側のクエリを変更し、兄弟を探します。

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

代わりのボタンをクリックすると、あなたの結果を総括するたびに、私はあなたがチェックボックスがクリックされた結果オブジェクトをいつでも扱うことをお勧め、これはより安定になり動的な変更をより適切に処理します。

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

このように、チェックボックスをクリックすると、結果オブジェクトはすぐに更新され、目的の値が反映されます。私はそれが `tableControl.find（ '入力[タイプ= "チェックボックス"]：チェックする'）であることを持っていると思う

{ 
    "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/