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

Question

JSFiddle在这里。

 $("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> 

我正在为表行（即HTML tr元素）编写JQuery双击侦听器。

在HTML表中， thead元素中的tr由列名组成，即列名，其值将在tbody中的每个tr中给出。

理想情况下，在我的JQuery dblclick()侦听器中，我需要双击行中所有字段的名称/键以及值。 理想的情况如下：

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

需要这些种类的名称-值对的原因是，从我的JQuery双击侦听器中，我需要通过AJAX将此数据发送到PHP脚本，该脚本对该文件进行进一步的服务器端处理。

现在，我所能获得的只是双击元素的外部HTML 。 从console.log($(this)[0].outerHTML); ：

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

问题是如何获取所单击的每个值，最好是与表头行中的的键/名称一起。

你会怎么做？ 欢迎任何提示/建议/建议。

Answer 1

我认为这就是您要寻找的。 输出是key => value object 。

我首先获取所有信息，进行一些修整并删除空值 。 那些干净的Arrays是processed_keys和processed_values 。

在最后一步中，我将这些arrays作为key => value对分配给我的data对象。

编辑：这当然不是最短的解决方案，例如，您可以组合循环。 但是出于演示目的，这应该足够=）。

这是工作的小提琴：

 $("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

更新

target是您需要的而不是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> 

注意：materialize.min.css给出了一个错误，但我们不需要它来制作此jquery示例。