从HTML表格jQuery中获取值

时间:2014-07-20 22:52:04

标签: javascript jquery html-table

我有一个包含以下值的HTML表:

<tr class="tuker1">
  <td class="tuker-lft1">
    Username
  </td> 
  <td class="tuker-rght1" onclick="awardRoute()">
    <a href="#">
      AWARD ROUTE
    </a> 
  </td> 
</tr>

当我点击AWARD ROUTE链接时,我想要内部的价值&#34; tuker-lft1&#34;进入函数变量。

awardRoute() {
  var username = "";
}

关于如何实现这一目标的任何想法?

6 个答案:

答案 0 :(得分:1)

假设页面上只有一个元素tuker-lft1

function awardRoute() {
    var username = $('.tuker-lft1').text();
}

如果你想要前一个单元格的文本(即左边的单元格),你可以使用兄弟树遍历函数:

function awardRoute() {
    var username = $(this).prev('td').text();
}

$('.tuker-rght1').click(awardRoute);

如果您希望单元格中具有类tuker-lft1的文本与您单击的单元格在同一行中,则无论单元格在何处,都使用父/子树遍历函数:

function awardRoute() {
    var username = $(this).parent().children('.tuker-lft1').text();
}

$('.tuker-rght1').click(awardRoute);

请注意,在最后两个示例中,您应该从HTML中删除onclick属性。

答案 1 :(得分:0)

你可以这样抓住它:

<td class="tuker-rght1" onclick="$(this).parents('tr').find('td:eq(0)').html()"><a href="#"> AWARD ROUTE </a> </td>

答案 2 :(得分:0)

<td class="tuker1">
   <td class="tuker-lft1"> Username </td> 
   <td class="tuker-rght1"> <a href="#"> AWARD ROUTE </a> </td> 
</td>

$(function(){
    $('.tuker-rght1').on('click', function(e){
        e.preventDefault();

        var username = $(this).prev().html();

        console.log(username);
    });
});

答案 3 :(得分:0)

使用此:

var username = $(this).closest('tr').find('.tuker-lft1').text();

答案 4 :(得分:0)

请参阅fiddle

标记:

<table>
    <tr>
        <td>
            Username
        </td> 
        <td class="award">
            Award
        </td>
    </tr>
</table>

JS:

var awards = [].slice.call(document.querySelectorAll('.award'));
awards.forEach(function(award){
    award.addEventListener('click', function(e){
        var parentNode = this.parentNode;
        var username = parentNode.querySelector('td').innerHTML;
        alert(username);
    });
});

答案 5 :(得分:-4)

var username = $(".tuker-lft1").val()