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

這是做事的一種可能的方式。我爲每種類型的列設置了一個類。您可以使用它來查找檢查行的所有其他信息。

觀察控制檯。你在一個對象中的所有信息，然後你就可以使用任何進一步的功能，你可能希望它做的

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

這樣，無論何時單擊複選框，結果對象都會立即更新以反映所需的值。結果對象將看起來像這樣：

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