在JQuery的dblclick（）侦听器中 <tr> ，如何获取所有孩子的内容 <td> 元素以及所有内容 <td> 在表格标题行中？

Question

JSFiddle here.

 $("table tr.table-row").dblclick(function() { alert("Double click event received."); alert($(this)[0].outerHTML); console.log($(this)[0].outerHTML); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="responsive-table"> <thead> <tr> <td>Name</td> <td>Place</td> <td>Animal</td> <td>Thing</td> </tr> </thead> <tbody> <!-- A Number Of Rows --> <tr class="table-row"> <td>Bob</td> <td>Berlin</td> <td>Mouse</td> <td>TV</td> </tr> <!-- A Number Of Rows --> </tbody> </table> 

I am writing a JQuery double-click listener for a table row, ie HTML tr element.

In the HTML table, the tr in the thead element consists of column-names, ie name of fields whose values will be given in each tr in the tbody .

Ideally, in my JQuery dblclick() listener, I need the names/keys as well as values for all the fields in the row which is double-clicked. Ideally, like so:

Name    : Bob
Place   : Berlin
Animal  : Mouse
Thing   : TV

The reason for needing these kinda name-value pairs is that, from my JQuery double click listener, I need to send this data via AJAX to a PHP script, which does some further server-side processing on it.

For now, all I have been able to get is the outer HTML of the double-clicked element. From the output of console.log($(this)[0].outerHTML); :

<tr class="table-row">
    <td>Bob</td>
    <td>Berlin</td>
    <td>Mouse</td>
    <td>TV</td>
  </tr>

The question is how do I get the value of each in the clicked, preferably along with key/name which are in the 's in the table-header-row.

How would you do this? Any tips/suggestions/advice is welcome.

Answer 1

I think this is what you're looking for. Output is a key => value object .

I grab all information first, do some trimming and removing empty values . Those clean Arrays are processed_keys and processed_values .

In the last step I assign those arrays as key => value pairs to my data object.

EDIT: This is not the shortest solution of course, you could combine the loops for example. But for demonstration purpose this should be enough =).

Here is the working fiddle:

 $("table tr.table-row").dblclick(function(e) { var values = $(e.target).parent().text().split('\\n'); var keys = $('thead').text().split('\\n'); var processed_keys = new Array(); var processed_values = new Array(); var data = {}; for(var i = 0; i < keys.length; i++){ if(keys[i].trim() !== ""){ processed_keys.push(keys[i].trim()); } } for(var i = 0; i < values.length; i++){ if(values[i].trim() !== ""){ processed_values.push(values[i].trim()); } } for(var i = 0; i < processed_keys.length; i++){ data[processed_keys[i]] = processed_values[i]; } console.log(data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <table class="responsive-table"> <thead> <tr> <td>Name</td> <td>Place</td> <td>Animal</td> <td>Thing</td> </tr> </thead> <tbody> <!-- A Number Of Rows --> <tr class="table-row"> <td>Bob</td> <td>Berlin</td> <td>Mouse</td> <td>TV</td> </tr> <tr class="table-row"> <td>Luke</td> <td>Munich</td> <td>Giraffe</td> <td>Radio</td> </tr> <!-- A Number Of Rows --> </tbody> </table> 

Answer 2

UPDATED

target is what you need instead of this .

 $("table tr.table-row").dblclick(function(e) { var pos = $(e.target).index() var name = $(e.target).closest("table").find("tr >td").eq(pos).text() console.log(name+": "+$(e.target).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="responsive-table"> <thead> <tr> <td>Name</td> <td>Place</td> <td>Animal</td> <td>Thing</td> </tr> </thead> <tbody> <!-- A Number Of Rows --> <tr class="table-row"> <td>Bob</td> <td>Berlin</td> <td>Mouse</td> <td>TV</td> </tr> <!-- A Number Of Rows --> </tbody> </table> 

Note: materialize.min.css gives an error but we dont need it to make this jquery example.