从数组中获取正确元素的正确方法

Question

I have the following two arrays:

var nodes = new Array();
var arr = [{
        name:"abc1",
        type:"blue"
    }, {
        name:"abc2",
        type:"red"
    }, {
        name:"abc3",
        type:"red"
    }, {
        name:"abc4",
        type:"green"
    }, {
        name:"abc5",
        type:"red"
    }, {
        name:"abc6",
        type:"blue"
    }];

Reading the info from " arr " I have got a table with 2 rows where no info on the elements with type not " blue " is given:

 ---------------------
 |    | name | type  |  } - thead
 ---------------------
 | [] | abc1 | blue  |  } - 1st row
 ---------------------   
 | [] | abc6 | blue  |  } - 2nd row
 ---------------------

The checkbox element of each row has a class " table_row_checkboxes "

Clicking on a checkbox in a row I find the index of the whole row. Than I test if the checkbox checked or not. If it is, than fill the new array called " nodes " with the names. If it is not, than empty the array.

$(".table_row_checkboxes").click(function(){
    var idx = $(this).closest("tr").index(); // row index of the table

    if ($(this).is(":checked")) {
        nodes.push(arr[idx].name);
    } else if($(this).not(":checked")) {
        nodes = $.grep(nodes, function(val_name) {
            return val_name != arr[idx].name;
        });
    }
}

Now my problem is, when I click on the element of the table with name " abc6 " I get the index number " 1 " of the element, which corresponds to the element " abc2 " in " arr ", and my new array " nodes " is filled with name " abc2 " instead of " abc6 ".

My question is, can someone give me a hint, which gets it right?

Answer 1

The problem is that you don't have a connection between your array and the created table.

I would suggest to set a custom attribute to the table row (tr) ( Custom Data Attributes ) and read this on click.

Your table row html should look like:

<tr data-array-index="5">[...]</tr>

Now you can retrieve the array index of the row via:

$(".table_row_checkboxes").click(function(){
    var arrayIndex = $(this).closest("tr").attr("data-array-index");
    [...]

I did not test it. But I think the approach is right.