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

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

如何使 <td> 單擊可編輯

如何使 <td> 單擊可編輯

慕蓋茨4494581 2023-10-14 10:05:32
我正在做作業(yè),但我不知道如何使表格行可以通過單擊進(jìn)行編輯。例如,單擊“約翰”我可以修改名稱。下面的代碼只是一小部分代碼,只是為了了解表是如何創(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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

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


兩種可能的解決方案

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

<table>

? ? <tr>

? ? ? <td>

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

? ? ? ?</td>

? ? </tr>

? ? <tr>

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

? ? </tr>

?</table>

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

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


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或者輸入替換?

您可能想知道選擇哪種解決方案,請(qǐng)記住以下幾點(diǎn):

  1. 標(biāo)準(zhǔn)輸入元素僅限于純文本輸入。使用該contentEditable屬性允許用戶編寫包含格式、表格、圖像等的內(nèi)容。

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

話雖如此,值得注意的是,他們正在構(gòu)建極其復(fù)雜的所見即所得編輯器,其中包括許多復(fù)雜的功能,他們?cè)谠摴δ苌嫌龅降暮芏鄦栴}是在使用更復(fù)雜的功能而不是非常簡單的功能時(shí)contentEditable

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


底線

除非您需要用戶編輯內(nèi)容,否則請(qǐng)使用輸入/文本區(qū)域解決方案。做起來要容易得多,因?yàn)?code>contentEditable很快就會(huì)變得復(fù)雜。


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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