我試圖獲取每行用戶有電子郵件並將其放入數組中的數據。所以基本上當用戶點擊複選框時,它啓用輸入字段,以便他們可以輸入電子郵件。到目前爲止,我能夠獲得電子郵件,但我不知道如何獲取每行的數據,只有擁有電子郵件的用戶才能查看,並且複選框仍處於選中狀態。例如,如果我選擇第2個用戶,並輸入一個電子郵件,我應該得到2種元素在我的數組:如何從JavaScript或jQuery中的每一行收集數據?
例:
邁克·布朗3035607897 [email protected]
瑪麗布倫斯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>
有人能告訴我我錯過了什麼嗎?非常感謝!
你的答案似乎並沒有得到各行,並把元素到一個數組? – HenryDev
它用'class =「inputEmail」'選擇所有元素,過濾掉空的元素並返回其他元素的值。我誤解了你嗎? – heyarne
我仍然不確定如何實現你的建議,並獲得每一行的值,並把它們放入一個數組?你能分享一個jsfflide,codepen或其他東西嗎?非常感謝! – HenryDev