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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使 <td> 單擊可編輯

如何使 <td> 單擊可編輯

慕蓋茨4494581 2023-10-14 10:05:32
我正在做作業(yè),但我不知道如何使表格行可以通過單擊進行編輯。例如,單擊“約翰”我可以修改名稱。下面的代碼只是一小部分代碼,只是為了了解表是如何創(chuàng)建的。任何提示或解決方案表示贊賞。        // Creating Table and Display DATA        let tableBody = document.getElementsByTagName('tbody')[0];        let tr = document.createElement('tr');        let ShowID = document.createElement('td');        let ShowName = document.createElement('td');        let ShowSurname = document.createElement('td');        let ShowAge = document.createElement('td');        let ShowPosition = document.createElement('td');        let ShowYofExperience = document.createElement('td');        let ShowEducation = document.createElement('td');        let ShowStatus = document.createElement('td');        let ShowNote = document.createElement('td');        for(let i = 0; i < candidates.length; i++){            let currentCandidate = candidates[i];            ShowID.innerText = currentCandidate.id;            ShowName.innerText = currentCandidate.name;            ShowSurname.innerText = currentCandidate.surname;            ShowAge.innerText = currentCandidate.age;            ShowPosition.innerText = currentCandidate.position;            ShowYofExperience.innerText = currentCandidate.experience;            ShowEducation.innerText = currentCandidate.education;            ShowStatus.innerText = currentCandidate.status;            ShowNote.innerText = currentCandidate.note;        }        // Checkbox         let ShowCheck = document.createElement('input');        ShowCheck.type = 'checkbox'        ShowCheck.id = 'checked';        ShowCheck.value = 'true';        tr.appendChild(ShowCheck);        tr.appendChild(ShowID);        tr.appendChild(btnPreview);        tr.appendChild(ShowName);        tr.appendChild(ShowSurname);        tr.appendChild(ShowAge);        tr.appendChild(ShowPosition);        tr.appendChild(ShowYofExperience);        tr.appendChild(ShowEducation);        tr.appendChild(ShowStatus);        tr.appendChild(ShowNote);
查看完整描述

1 回答

?
千巷貓影

TA貢獻1829條經(jīng)驗 獲得超7個贊

有多種方法可以使其可編輯,具體來說,我將介紹兩種方法,一種是使用屬性contentEditable,第二種是渲染輸入。


兩種可能的解決方案

  1. 您可以contentEditablediv.?以下是其工作原理的示例:

<table>

? ? <tr>

? ? ? <td>

? ? ? ? <div contenteditable>I'm editable</div>

? ? ? ?</td>

? ? </tr>

? ? <tr>

? ? <td>I'm not editable</td>

? ? </tr>

?</table>

您可以在單擊時添加到,并在模糊時更改<input>為。<td><input>

我將分享一個代碼示例,為了簡單起見,我們不會使用它來渲染輸入document.createElement,而是在每個 td 上使用它,您也可以每次都手動渲染輸入。


function onTdClick() {

? document.querySelector('.my-span').style.display = 'none';

? document.querySelector('.my-input').style.display = 'block';

}


function onInputBlur() {

? document.querySelector('.my-span').style.display = 'block';

? document.querySelector('.my-input').style.display = 'none';

}

.my-input {

? display: none;

}

<table>

? ? <tr>

? ? ? <td>

? ? ? ? <span class="my-span" onclick="onTdClick()">I'm editable</span>

? ? ? ? <input type="text" class="my-input" onblur="onInputBlur()" />

? ? ? ?</td>

? ? </tr>

?</table>

選擇哪種解決方案,contentEditable或者輸入替換?

您可能想知道選擇哪種解決方案,請記住以下幾點:

  1. 標準輸入元素僅限于純文本輸入。使用該contentEditable屬性允許用戶編寫包含格式、表格、圖像等的內容。

  2. 使用contentEditable并不像乍一看那樣完全可靠。

話雖如此,值得注意的是,他們正在構建極其復雜的所見即所得編輯器,其中包括許多復雜的功能,他們在該功能上遇到的很多問題是在使用更復雜的功能而不是非常簡單的功能時contentEditable。

然而,即使是“更簡單”的功能,在使用時也應該注意很多事情contentEditable,這就是為什么很多人建議在大多數(shù)情況下不要使用它。


底線

除非您需要用戶編輯內容,否則請使用輸入/文本區(qū)域解決方案。做起來要容易得多,因為contentEditable很快就會變得復雜。


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 272 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號