在jquery中获取多个选定的单元格值

时间:2015-04-08 12:03:10

标签: jquery

我有一个表格,我可以在其中选择多个单元格,在选择之后,我想从每个选定的单元格中获取列和行值。

<table cellpadding="0" cellspacing="1" id="our_table">
                                <thead style="background-color: #393a44;">
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                        <th>SUN</th>
                                    </tr>



                                </thead>



                                <tr>
                                    <td>00h</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
      <tr>
                                    <td>01h</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
      <tr>
                                    <td>02h</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
      <tr>
                                    <td>03h</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>

                            </table>

显示所有选定的

这是我的jsfiddle

当我在按钮单击中选择表格中的某些单元格时,我希望从所有选定单元格的列和行中获取文本。

如果我选择单元格星期一0h和1h以及星期二0h结果当我点击按钮将是星期一0h,星期一1h,星期二0h

3 个答案:

答案 0 :(得分:1)

您可以使用.map()和基于索引的查找

 $('#Spremi').click(function(){
     var $heads = $('#our_table thead th');
     var array = $('#our_table td.highlighted').map(function(){
         var $this = $(this);
         return $this.parent().children().eq(0).text() + ' ' + $heads.eq($this.index()).text();
     }).get()
     console.log(array)
 })

演示:Fiddle

答案 1 :(得分:0)

你可以这样使用

$("#Spremi").click(function(){

    $(".highlighted").each(function(){
    var day= $("#our_table tr th").eq($(this).index()).text();
        var hour= $(this).closest("tr").find("td:first").text();
        alert(day + hour);
    });
});

您可以使用.each()循环显示每个突出显示的元素。然后取当前td的索引,使用该索引找到相应的标题。

Fiddle

答案 2 :(得分:0)

试试这个:您可以迭代所有突出显示的td并使用closest()找到相应的小时和工作日标签

$('#Spremi').click(function(){
     var str = "";
     $('#our_table tr td.highlighted').each(function(){
         if($(this).text().trim()=='')
         {
            var index = $(this).index();
            // get hour label
            str += $(this).closest('tr').find('td:first').text();
            //get week day label
            str = str + 
                 $(this).closest('table').find('tr:first th:eq('+index+')').text(); 
                 + ", ";
           }             
      });   
      alert(str);
});

<强> DEMO