如何從JavaScript或jQuery中的每一行收集數據？

Question

我試圖獲取每行用戶有電子郵件並將其放入數組中的數據。所以基本上當用戶點擊複選框時，它啓用輸入字段，以便他們可以輸入電子郵件。到目前爲止，我能夠獲得電子郵件，但我不知道如何獲取每行的數據，只有擁有電子郵件的用戶才能查看，並且複選框仍處於選中狀態。例如，如果我選擇第2個用戶，並輸入一個電子郵件，我應該得到2種元素在我的數組：

例：

邁克·布朗3035607897 micke@gmail.com

瑪麗布倫斯3035607233瑪麗@ gmail的.COM

這裏是我的代碼：

$(document).ready(function() { 
 

 
    $("#checkAll").change(function() { 
 
    $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() { 
 
     enable_disable_input(this); 
 
    }); 
 
    }); 
 

 
    function enable_disable_input(checkbox) { 
 
    var input_id = checkbox.id.replace('-checkbox', '-inputField'); 
 
    $("#" + input_id).prop('disabled', !checkbox.checked); 
 
    } 
 

 
    $(".input_checkbox").change(function() { 
 
    enable_disable_input(this); 
 
    }); 
 

 
    $(".input_checkbox").each(function() { 
 
    enable_disable_input(this); 
 
    }); 
 

 
    /* Collecting data ONLY from users that have an email */ 
 
    $("#myform").submit(function(event){ 
 
    \t event.preventDefault(); 
 
    \t $(".inputEmail").each(function(){ 
 
    \t if($(this).val().length > 0){ 
 
    \t var inputValue = $(this).val(); 
 
    \t console.log(inputValue); 
 
    \t } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id = "myform"> 
 
    <input type="checkbox" id="checkAll" />Select All 
 
    <br/> 
 
<tr> 
 
    <td><input type="checkbox" id="0customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Mike</td> 
 
    <td>brown</td> 
 
    <td>3035607897</td> 
 
    <td><input type="email" name="name" id="0customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Mary</td> 
 
    <td>Bruns</td> 
 
    <td>3035607233</td> 
 
    <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="2customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Lauren</td> 
 
    <td>White</td> 
 
    <td>3035634211</td> 
 
    <td><input type="email" name="email" id="2customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="3customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Tyler</td> 
 
    <td>Steven</td> 
 
    <td>3035236671</td> 
 
    <td><input type="email" name="email" id="3customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="4customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Carl</td> 
 
    <td>Douglas</td> 
 
    <td>3035227243</td> 
 
    <td><input type="email" name="email" id="4customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="5customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Peter</td> 
 
    <td>McClure</td> 
 
    <td>3035112239</td> 
 
    <td><input type="email" name="email" id="5customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
<tr> 
 
    <td><input type="checkbox" id="6customer-name-checkbox" class="input_checkbox"></td> 
 
    <td>Liz</td> 
 
    <td>Prems</td> 
 
    <td>3035120075</td> 
 
    <td><input type="email" name="email" id="6customer-name-inputField" class = "inputEmail"/></td> 
 
</tr> 
 
<br/> 
 

 
    <input type="submit" value="Send"/> 
 
</form>

有人能告訴我我錯過了什麼嗎？非常感謝！

Answer 1

看看$.map和$.filter，你可以找到文檔here和here。它允許您檢查選擇$(".inputEmail")，並通過將其保留或返回基於輸入值的另一個值進行轉換。

首先，給一些類的tds（用於用戶數據的每一行做到這一點）：

<tr> 
    <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td> 
    <td class="firstName">Mary</td> 
    <td class="lastName">Bruns</td> 
    <td class="userNumber">3035607233</td> 
    <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td> 
</tr> 

然後，當你想要檢索的信息（在你的.submit回調，你可以運行下面的點最大概）：

var users = $("tr") 
    .filter(function() { return $(this).find('.inputEmail').val() !== "" }) 
    .map(function() { 
    var $row = $(this); 
    return { 
     firstName: $row.find('.firstName').text(), 
     lastName: $row.find('.lastName').text(), 
     number: $row.find('.userNumber').text(), 
     email: $row.find('.inputEmail').val() 
    } 
    }) 
    .get(); 

console.log('Array containing all users with an email:'); 
console.log(users); 

Answer 2

嗨檢查此鏈接爲rerence檢查控制檯值http://plnkr.co/edit/3GFBckmBMomJwgMNIHrr

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id = "myform"> 
    <input type="checkbox" id="checkAll" />Select All 
    <br/> 
    <table> 
<tr> 
    <td><input type="checkbox" id="0customer-name-checkbox" class="input_checkbox"></td> 
    <td>Mike</td> 
    <td>brown</td> 
    <td>3035607897</td> 
    <td><input type="email" name="name" id="0customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td> 
    <td>Mary</td> 
    <td>Bruns</td> 
    <td>3035607233</td> 
    <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="2customer-name-checkbox" class="input_checkbox"></td> 
    <td>Lauren</td> 
    <td>White</td> 
    <td>3035634211</td> 
    <td><input type="email" name="email" id="2customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="3customer-name-checkbox" class="input_checkbox"></td> 
    <td>Tyler</td> 
    <td>Steven</td> 
    <td>3035236671</td> 
    <td><input type="email" name="email" id="3customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="4customer-name-checkbox" class="input_checkbox"></td> 
    <td>Carl</td> 
    <td>Douglas</td> 
    <td>3035227243</td> 
    <td><input type="email" name="email" id="4customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="5customer-name-checkbox" class="input_checkbox"></td> 
    <td>Peter</td> 
    <td>McClure</td> 
    <td>3035112239</td> 
    <td><input type="email" name="email" id="5customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 

<tr> 
    <td><input type="checkbox" id="6customer-name-checkbox" class="input_checkbox"></td> 
    <td>Liz</td> 
    <td>Prems</td> 
    <td>3035120075</td> 
    <td><input type="email" name="email" id="6customer-name-inputField" class = "inputEmail"/></td> 
</tr> 
<br/> 
</table> 
    <input type="submit" value="Send" id="send"/> 
</div> 
    </body> 

</html> 

和JS

// Add your javascript here 
$(function() { 
    $("#checkAll").change(function() { 
     $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() { 
      enable_disable_input(this); 
     }); 
    }); 

    function enable_disable_input(checkbox) { 
     var input_id = checkbox.id.replace('-checkbox', '-inputField'); 
     $("#" + input_id).prop('disabled', !checkbox.checked); 
    } 

    $(".input_checkbox").change(function() { 
     enable_disable_input(this); 
    }); 

    $(".input_checkbox").each(function() { 
     enable_disable_input(this); 
    }); 

    /* Collecting data ONLY from users that have an email */ 
    $("#send").click(function() { 
     var totalrecord = []; 
     $(".inputEmail").each(function() { 
      if ($(this).val().length > 0) { 
       var inputValue = $(this).val(); 
       var $row = $(this).closest("tr"), // Finds the closest row <tr> 
        $tds = $row.find("td"); // Finds all children <td> elements 
       var abj = {}; 
       $.each($tds, function(index, element) { 
        console.log(index) 
        if (index == 1) { 
         abj.name = $(this).text() 
        } else if (index == 2) { 
         abj.submae = $(this).text() 
        } else if (index == 3) { 
         abj.id = $(this).text() 
        } else { 
         abj.mail = inputValue 
        } 
        console.log($(this).text()) 
       }); 
       totalrecord.push(abj) 

       console.log(totalrecord) 
      } 
     }); 
    }); 
});