Question

我有以下HTML表格格式（仅显示一行中的一行），在最后一个单元格上有一个按钮：

<div id=main>
    	 <div class='info'>
    	 	<p>Name: <span class='x'>ABC</span></p>
    	 	<p>Number: <span class='x'>0</span></p>
    	 	<table class='newTable'>
    	 		<tr>
    	 			<th>
    	 				Number
    	 			</th>
    	 			<th>	
    	 				Value
    	 			</th>
    	 			<th>	
    	 				Go
    	 			</th>
    	 			
    			</tr>
    			<tr>
    	 			<td>
    	 				0
    	 			</td>
    	 			<td>
    	 				<span class='k'>11.7</span>
    	 			</td>
    	 			<td>
    					<button class='go'>Go</button>
    				</td>
    	 		</tr>
     		</table>
     	</div>
    </div>

我有一个事件监听器（mainEntries.addEventListener('click', clickFunction)），它会在<div id = main> ... </div>内

触发

我不允许更改HTML。我有两个问题：

1）如果我单击了按钮“ GO”或位于function clickFunction(e)内的某个地方，如何在<div id = main> ... </div>内进行检查

*** clickFunction(e)中的e是MouseEvent

2）如果单击按钮，如何在同一行的第一个单元格内获取文本？

Answer 1

1）您应该考虑在e.target内使用function clickFunction(e)

2）您应该选择该按钮的祖父母，然后从父母中选择第一个孩子。 buttonElement.parentNode.parentNode.children[0].innerText

Answer 2

如前所述，您可以使用e.target来获得点击的元素。然后，您可以使用找到的按钮的closest()和cells.item()功能的组合：

const mainEntries = document.querySelector('#main');

const clickFunction = e => {
  if (e.target.tagName === 'BUTTON' && e.target.classList.contains('go')) {
    const firstCellSameRow = e.target.closest('tr').cells.item(0).innerText;
    console.log('GO button clicked. First cell\'s text at the same row is ', firstCellSameRow);
  }
  else {
    console.log('Main div clicked outside of GO button');
  }
}

mainEntries.addEventListener('click', clickFunction);

<div id=main>
     <div class='info'>
        <p>Name: <span class='x'>ABC</span></p>
        <p>Number: <span class='x'>0</span></p>
        <table class='newTable'>
            <tr>
                <th>
                    Number
                </th>
                <th>    
                    Value
                </th>
                <th>    
                    Go
                </th>

            </tr>
            <tr>
                <td>
                    0
                </td>
                <td>
                    <span class='k'>11.7</span>
                </td>
                <td>
                    <button class='go'>Go</button>
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    <span class='k'>8.5</span>
                </td>
                <td>
                    <button class='go'>Go</button>
                </td>
            </tr>
        </table>
    </div>
</div>

我添加了另一行用于显示不同的日志。

JavaScript：单击按钮后检查事件是否发生

2 个答案: