2

我有以下 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>

我有一个 eventListener ( mainEntries.addEventListener('click', clickFunction))，只要在里面触发<div id = main> ... </div>

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

function clickFunction(e)1）如果我点击按钮“GO”或里面的某个地方，我如何检查里面<div id = main> ... </div>

*** clickFunction(e)e里面是MouseEvent

2）如果我点击按钮，我怎样才能在同一行的第一个单元格中获取文本？

4

2 回答 2

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>

我添加了另一个不同的行来显示不同的日志。

于 2018-10-21T00:39:49.820 回答
1

1）你应该考虑e.target里面function clickFunction(e)

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

于 2018-10-21T00:24:08.903 回答