我创建了一个包含 4 列的 html 表格。在该表中，其中一列是可编辑的（带有编辑按钮）。当我单击编辑按钮时，如果我的 html 表中有 1 条记录，它会按预期工作。但如果我有 2 条记录，它就不会按预期工作。当我单击第二条记录编辑按钮时，它使表中的第一条记录可编辑。请在下面找到我的 html 代码。<!DOCTYPE html><html><head><script> function update_country() { if(document.getElementById("Editbtn").value == 'Edit'){ document.getElementById("country").style.display = 'none'; document.getElementById("Editbtn").value = "Update"; document.getElementById("countries").style.display = 'inline-block'; } }</script><style>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: #dddddd;}</style></head><body><h2>HTML Table</h2><table> <tr> <th>ID</th> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>101</td> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td id="country">Germany</td> <td id="countryOption"> <select name="countries" id="countries" style="display:none; > <option value="Germany">Germany</option> <option value="India">India</option> <option value="France">France</option> <option value="Italy">Italy</option> </select> <input id="Editbtn" type="button" value="Edit" onclick="update_country()"> </td> </tr> <tr> <td>102</td> <td>Futterkiste</td> <td>Joe</td> <td id="country">Italy</td> <td id="countryOption"> <select name="countries" id="countries" style="display:none; > <option value="Germany">Germany</option> <option value="India">India</option> <option value="France">France</option> <option value="Italy">Italy</option> </select> <input id="Editbtn" type="button" value="Edit" onclick="update_country()"> </td> </tr> </table></body></html>
1 回答
鸿蒙传说
TA贡献1865条经验 获得超7个赞
document.getElementById将始终返回与 id 匹配的第一个元素。
所以你可以只抓住点击的目标：
function update_country( e ) {
if( e.target.value == 'Edit' ) {
e.target.value = 'Update'
e.target.parentNode.parentNode.querySelector( '#country' ).style.display = 'none'
e.target.parentNode.querySelector( '#countries' ).style.display = 'inline-block'
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<h2>HTML Table</h2>
<table>
<tr>
<th>ID</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>101</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td id="country">Germany</td>
<td id="countryOption">
<select id="countries" class="countries" style="display:none;">
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
</select>
<input id="Editbtn" type="button" value="Edit" onclick="update_country(event)">
</td>
</tr>
<tr>
<td>102</td>
<td>Futterkiste</td>
<td>Joe</td>
<td id="country">Italy</td>
<td id="countryOption">
<select id="countries" class="countries" style="display:none;">
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
</select>
<input id="Editbtn" type="button" value="Edit" onclick="update_country(event)">
</td>
</tr>
</table>
添加回答
举报
0/150
提交
取消