第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Javascript html 表格單元格編輯不正確

Javascript html 表格單元格編輯不正確

UYOU 2023-03-18 11:00:10
我創(chuàng)建了一個(gè)包含 4 列的 html 表格。在該表中,其中一列是可編輯的(帶有編輯按鈕)。當(dāng)我單擊編輯按鈕時(shí),如果我的 html 表中有 1 條記錄,它會(huì)按預(yù)期工作。但如果我有 2 條記錄,它就不會(huì)按預(yù)期工作。當(dāng)我單擊第二條記錄編輯按鈕時(shí),它使表中的第一條記錄可編輯。請(qǐng)?jiān)谙旅嬲业轿业?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 回答

?
鴻蒙傳說(shuō)

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

 document.getElementById將始終返回與 id 匹配的第一個(gè)元素。


所以你可以只抓住點(diǎn)擊的目標(biāo):


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>


查看完整回答
反對(duì) 回復(fù) 2023-03-18
  • 1 回答
  • 0 關(guān)注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)