javascript - 在下一个示例中如何获取行 id

Question

我需要显示 showId() 中单击的 anchor 元素的行 ID :

function showId() {
    var id = $(this).attr('id'); //This return undefined
            
    alert(id);
    return false;
}

<table>
    <thead>
    	<tr>
            <th>header1</th> 
            <th>header2</th>			 
        </tr>
    </thead>
    <tbody>
        <tr id=1>
            <td><a href="" onclick="return showId()">row1 td1</td> 
            <td><a href="" onclick="return showId()">row1 td2</td>			 
        </tr>
        <tr id=2>
            <td><a href="" onclick="return showId()">row2 td1</td> 
            <td><a href="" onclick="return showId()">row2 td2</td>			 
        </tr>
        <tr id=3>
            <td><a href="" onclick="return showId()">row3 td1</td> 
            <td><a href="" onclick="return showId()">row3 td2</td>			 
        </tr>
    </tbody>
</table>

Answer 1

您需要将单击的元素作为参数发送，以便该函数有一个要启动的元素。

• 开始于:项目
• 第一个父节点:td = item.parentNode
• 第二个父节点:tr = item.parentNode.parentNode

function showId(item) {
    var id = item.parentNode.parentNode.id;
            
    alert(id);
    return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
    <tr>
        <th>header1</th> 
        <th>header2</th>			 
    </tr>
</thead>
<tbody>
    <tr id="1">
        <td><a href="" onclick="return showId(this)">row1 td1</td> 
        <td><a href="" onclick="return showId(this)">row1 td2</td>			 
    </tr>
    <tr id="2">
        <td><a href="" onclick="return showId(this)">row2 td1</td> 
        <td><a href="" onclick="return showId(this)">row2 td2</td>			 
    </tr>
    <tr id="3">
        <td><a href="" onclick="return showId(this)">row3 td1</td> 
        <td><a href="" onclick="return showId(this)">row3 td2</td>			 
    </tr>
</tbody>
</table>