我創建了一個包含 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>
Javascript html 表格單元格編輯不正確
UYOU
2023-03-18 11:00:10
