jQuery-从按钮单击事件中获取具有包含特定值的字段的行的表头值

Question

I am using a horizontal table with a select list (dropdown) as one of the fields. When I click submit I need to grab the table header value for that column and the value from the dropdown.

My table class = "views-table" essentially looks like this:

header1 | header2 | header3 | header 4
--------------------------------------
select    select    select   select
data1     data2     data3    data4 

[submit button]

My dropdown class="request-select" element holds the following values:

select list:
  -empty
  -FIRST
  -SECOND

So after a user selects a first value the table should look like this:

header1 | header2 | header3 | header 4
--------------------------------------
select    FIRST    select   select
data1     data2     data3    data4 

[submit button]

And the data I am expecting after the user clicks submit is: header2 and FIRST

I can grab the table header value from the change event from the dropdown with:

jQuery('table.views-table').on('change', 'td', function(e) {  
    var tableHead= e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
    alert([jQuery(tableHead).text()]);  
    // returns `header2` from dropdown with `FIRST` value selected
});

But I can't figure out how to drill down and access this data from the submit button. I don't want to use a hidden element or use localstorage. Any ideas on how I should approach this? I am very inexperienced with jQuery. If you need more information please let me know and I can provide more details if needed.

Answer 1

One of the approach would be providing related IDs to your headers and select tags. For example you can provide IDs like "select-1", "select-2"... to your dropdowns. Similarly you have to provide IDs to your header tags like "thead-1", "thead-2"..., Now on submit click event, check which dropdown value has been changed(value!="") and then grab the last digit of that dropdown ID. Now you can use that digit to get value of respected header.

Answer 2

如果能够获取cells索引的句柄，则可以使用.val（）而不是.text（）来获取其值。