Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td ><button class='btnSelect'>Order</button>
</tr>
<script>
    $(".btnSelect").on('click',function() {
        var tdNumber = $(this).find('.number').html();
        var data = $(this).find('.number').html();
        alert(data);
    })
</script>

如果我点击了订单按钮，显示错误 undefined ，那是什么错误？

谢谢

Answer 1

第一个：：关闭</td>中的<td ><button class='btnSelect'>Order</button>标记

第二名：，您需要使用.closest('tr').find

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td ><button class='btnSelect'>Order</button></td>
</tr>
</table>
<script>
$(document).ready(function(){ // you may need to use document ready
    $(".btnSelect").on('click',function(){
      var data = $(this).closest('tr').find('.number').html();
      alert(data);
    });
});
</script>

Answer 2

基本上，您在html dom中几乎没有错误。

<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td><button class='btnSelect'>Order</button>
</tr>

button不包含td，并且tr不包含table和jQuery

$(".btnSelect").on('click', function() {
    var tdNumber = $(this).find('.number').html();
    var data = $(this).find('.number').html();
    alert(data);
});

button内的tr上有一个事件，请注意，您确实可以从孩子到父母找到。即$(this).find('.number').html();，这里的$(this)是单击按钮的对象，您正在搜索父级的同胞，即tr，您可以查看以下示例，该示例是根据您提供的代码编写的

$(".btnSelect").on('click', function() {
    var data = $(this).parent().siblings('.number').text();
    alert(data);
})

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
    <tr>
        <td class='type'> Type name </td>
        <td class='number'> 102030 </td>
        <td class='software'> 1.0-Alpha </td>
        <td><button class='btnSelect'>Order</button></td>
    </tr>
</table>

Answer 3

要选择同一棵树的任何元素，必须先移至根，然后找到它。

在html dom元素中，要进入根目录，您必须使用closest（）函数，而要从根目录查找，则必须使用find（）函数

使用此

$(".btnSelect").on('click',function(){
    var tdNumber = $(this).closest('tr').find('.number').html();
    var data = $(this).closest('tr').find('.number').html();
    alert(data);
});

如何获得价值

3 个答案: