獲取 html 表的第一列的值

Question

我有一個具有以下表結構的 HTML 表。 當我單擊最后一列中的span元素時，我希望獲得同一行中第一個td的值。

<tbody>
 <tr >
    <td >1</td>
    <td>75</td>
    <td>NA</td>
    <td>700</td>
    <td >
        <span  onclick="deleterec()" >
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i>
        </span>
    </td>
 </tr>
 <tr >
    <td>76</td>
    <td>100</td>
    <td>NA</td>
    <td>600</td>
    <td >
        <span onclick="deleterec()" >
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i>
        </span> 
  </td>
 </tr>
 <tr >
    <td>101</td>
    <td  ">NA</td>
    <td>200</td>
    <td>500</td>
    <td >
        <span  onclick="deleterec()" >
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i>
        </span>
    </td>
 </tr>
</tbody>

這是我使用的 javascript 代碼

function deleterec(){

  var tr=$(this).closest('tr');
  var x=tr.children('td:first-child').text();
}

但是，它不返回第一列的值。 我怎樣才能做到這一點？

Answer 1

如下在onclick function 中傳遞this ，也檢查如何簡單地獲取第一個td文本。

 function deleterec(obj){ var tr=$(obj).parents('tr').find('td:first-child').text(); console.log(tr); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <tbody> <tr > <td >1</td> <td>75</td> <td>NA</td> <td>700</td> <td > <span onclick="deleterec(this)" > <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> <tr > <td>76</td> <td>100</td> <td>NA</td> <td>600</td> <td > <span onclick="deleterec(this)" > <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> <tr > <td>101</td> <td>NA</td> <td>200</td> <td>500</td> <td > <span onclick="deleterec(this)" > <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> </tbody> </table>

Answer 2

您也可以避免 jquery。

 const deleterec = () => { let elm = event.target; while (elm.tagName.== "TR") { elm = elm;parentElement. } const td = elm;querySelector("td"). console.log(td;innerText); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <tbody> <tr> <td>1</td> <td>75</td> <td>NA</td> <td>700</td> <td> <span onclick="deleterec()"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> <tr> <td>76</td> <td>100</td> <td>NA</td> <td>600</td> <td> <span onclick="deleterec()"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> <tr> <td>101</td> <td>NA</td> <td>200</td> <td>500</td> <td> <span onclick=" deleterec()"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px;"></i> </span> </td> </tr> </tbody> </table>

Answer 3

 function deleterec(index) { let row = document.querySelectorAll('.tr'); console.log(row); console.log(row[index]); }

 span { cursor: pointer; } i { pointer-events: none; }

 <table> <tbody class="table"> <tr class="tr"> <td>1</td> <td>75</td> <td>NA</td> <td>700</td> <td> <span onclick="deleterec(0)"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px" >span</i > </span> </td> </tr> <tr class="tr"> <td>1</td> <td>75</td> <td>NA</td> <td>700</td> <td> <span onclick="deleterec(1)"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px" >span</i > </span> </td> </tr> <tr class="tr"> <td>1</td> <td>75</td> <td>NA</td> <td>700</td> <td> <span onclick="deleterec(2)"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-remove fa-stack-1x" style="line-height: 20px" >span</i > </span> </td> </tr> </tbody> </table>

您可以在 function 中傳遞索引。 或者如果您動態創建一行然后傳遞一個索引。

Answer 4

 function deleterec(obj){ var ab = $(obj).closest('tr').find('td:first-child').text() console.log(ab); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table id='ids'> <tbody> <tr> <td>1</td> <td>75</td> <td>NA</td> <td>700</td> <td> <span onclick="deleterec(this)" > <i class="fa fa-remove" style="line-height: 20px;"></i> </span> </td> </tr> <tr> <td>76</td> <td>100</td> <td>NA</td> <td>600</td> <td> <span onclick="deleterec(this)" > <i class="fa fa-remove" style="line-height: 20px;"></i> </span> </td> </tr> <tr> <td>101</td> <td>NA</td> <td>200</td> <td>500</td> <td> <span onclick="deleterec(this)" > <i class="fa fa-remove" style="line-height: 20px;"></i> </span> </td> </tr> </tbody> </table>