I have some code that should selected data from an HTML table into a JavaScript array. The code appears to work fine, yet I can not then access the array values by index. The alerts in this jsfiddle show that the contents and length of the array appear as expected. Have I got some kind of Typing error?
https://jsfiddle.net/nicktry/bwdsh5uv/39/
$(function () {
var selectedJobs = [];
//remove job from list
function removeJob(arr, jobValue) {
var p = arr.indexOf("'"+jobValue+"'");
if (p != -1) {
arr.splice(p, 1);
}
}
//add job to list
function addJob(arr, jobValue) {
arr.push("'"+jobValue+"'"); //append
arr = arr.sort(); //sort list
}
$('table tbody tr').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("selected_row");
addJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
} else {
$(this).closest('tr').removeClass("selected_row");
removeJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
}
});
var cluster1Job1 = selectedJobs[0];
var cluster1Job2 = selectedJobs[1];
var cluster1Job3 = selectedJobs[2];
document.getElementById('c1J1').innerHTML = cluster1Job1;
document.getElementById('c1J2').innerHTML = cluster1Job2;
document.getElementById('c1J3').innerHTML = cluster1Job3;
});
Thanks
答案 0 :(得分:3)
You're not updating the divs at the bottom after the jobs change.
https://jsfiddle.net/bwdsh5uv/41/
I put the div stuff at the bottom in a function
function checkJobs() {
var cluster1Job1 = selectedJobs[0];
var cluster1Job2 = selectedJobs[1];
var cluster1Job3 = selectedJobs[2];
document.getElementById('c1J1').innerHTML = cluster1Job1;
document.getElementById('c1J2').innerHTML = cluster1Job2;
document.getElementById('c1J3').innerHTML = cluster1Job3;
}
then after the jobs change I call that function
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("selected_row");
addJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
} else {
$(this).closest('tr').removeClass("selected_row");
removeJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
}
checkJobs();
});
答案 1 :(得分:2)
I'm not sure I understand the question correctly, but if I understand correctly you want the elements c1J1
, c1J2
and c1J3
to update when the checkbox is checked.
You currently don't have this behavior, because the inner text is only updated once, as it does not respond to any event handler. In order for this to work you can add the change code to event handler, for example to change:
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("selected_row");
addJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
} else {
$(this).closest('tr').removeClass("selected_row");
removeJob(selectedJobs, $(this).parent().next().text());
alert(selectedJobs);
alert(selectedJobs.length);
}
var cluster1Job1 = selectedJobs[0];
var cluster1Job2 = selectedJobs[1];
var cluster1Job3 = selectedJobs[2];
document.getElementById('c1J1').innerHTML = cluster1Job1;
document.getElementById('c1J2').innerHTML = cluster1Job2;
document.getElementById('c1J3').innerHTML = cluster1Job3;
});