jQuery的插入两个标签（即：<b><span>插入的文本</span></b>）之间的文本

Question

我创建了一个短脚本的HTML表格，当你点击一个单元格，你可以修改它的内容以及与保存按钮，你可以保存它。当然只是暂时的，因为我只修改DOM。

我想要红色的保存按钮（文本），所以我想把一个标签。

我非常接近解决方案，但我真的只是在最后一步停滞不前。

这里是我的代码：

<style> 
b { 
    color: red; 
    } 

<table border='1' id="editTable"> 
    <tr> 
    <td><span>John</span></td> 
    <td><span>Doe</span></td> 
    </tr> 
    <tr> 
    <td><span>Jane</span></td> 
    <td><span>Doe</span></td> 
    </tr> 
</table> 

的Javascript

const table = document.getElementById('editTable'); 

table.addEventListener('click', (e) => { 
    if (e.target.tagName === 'SPAN') { 
    const button = e.target; 
    const td = button.parentNode; 
    const span = td.firstElementChild; 
    if (button.textContent === span.textContent) { 
     const b = document.createElement('b'); 
     const input = document.createElement('input'); 
     input.value = span.textContent; 
     td.insertBefore(input, span); 
     td.insertBefore(b, span); 
     button.textContent = '-=>SAVE<=-'; 
    } else if (button.textContent === '-=>SAVE<=-') { 
     const input = td.firstElementChild; 
     const span = document.createElement('span'); 
     span.textContent = input.value; 
     td.insertBefore(span, input); 
     td.removeChild(input); 
     button.textContent = ''; 
    } 
    } 
}); 

jsfiddle demo

Answer 1

的问题是：

1-你的代码没有追加<span>到<b>

2 - 没有必要混淆自己与button而其span

3-无需使用const span = td.firstElementChild;，而你使用e.target.textContent将返回点击范围的文字

4更改const td = button.parentNode;到const td = span.closest('td');因为td将不再是父节点span内b

纯JavaScript

const table = document.getElementById('editTable'); 
 

 
table.addEventListener('click', (e) => { 
 
    if (e.target.tagName == 'SPAN') { 
 
    const span = e.target; 
 
    const td = span.closest('td'); 
 
    if (span.textContent !== '-=>SAVE<=-') { 
 
     const b = document.createElement('b'); 
 
     const input = document.createElement('input'); 
 
     input.value = span.textContent; 
 
     span.textContent = '-=>SAVE<=-'; 
 
     b.appendChild(span); 
 
     td.appendChild(b); 
 
     td.insertBefore(input, b); 
 
    } else { 
 
     const input = td.firstElementChild; 
 
     const span = document.createElement('span'); 
 
     span.textContent = input.value; 
 
     td.innerHTML = ''; 
 
     td.appendChild(span); 
 
    } 
 
    } 
 
});

b { 
 
    color: red; 
 
}

<table border='1' id="editTable"> 
 
    <tr> 
 
    <td><span>John</span></td> 
 
    <td><span>Doe</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span>Jane</span></td> 
 
    <td><span>Doe</span></td> 
 

 
    </tr> 
 
</table>

JQUERY

$(document).on('click', '#editTable span' , function(){ 
 
    var getText = $(this).text(); 
 
    if(getText !== '-=SAVE=-'){ 
 
    $(this).closest('td').html('<input type="text" value="'+getText+'"/>'+ 
 
       '<b><span>-=SAVE=-</span><b>' 
 
      ); 
 
    }else{ 
 
    var inputVlaue = $(this).closest('td').find('input').val(); 
 
    $(this).closest('td').html('<span>'+inputVlaue+'</span>'); 
 
    
 
    } 
 
});

b { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border='1' id="editTable"> 
 
    <tr> 
 
    <td><span>John</span></td> 
 
    <td><span>Doe</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span>Jane</span></td> 
 
    <td><span>Doe</span></td> 
 

 
    </tr> 
 
</table>

Answer 2

无需添加自定义标签和额外的CSS，只需添加button.style.color = 'red';插入的SAVE

const table = document.getElementById('editTable'); 
 

 
table.addEventListener('click', (e) => { 
 
    if (e.target.tagName === 'SPAN') { 
 
    const button = e.target; 
 
    const td = button.parentNode; 
 
    const span = td.firstElementChild; 
 
    if (button.textContent === span.textContent) { 
 
     const input = document.createElement('input'); 
 
     input.value = span.textContent; 
 
     td.insertBefore(input, span); 
 
     button.textContent = '-=>SAVE<=-'; 
 
     button.style.color = 'red'; 
 
    } else if (button.textContent === '-=>SAVE<=-') { 
 
     const input = td.firstElementChild; 
 
     const span = document.createElement('span'); 
 
     span.textContent = input.value; 
 
     td.insertBefore(span, input); 
 
     td.removeChild(input); 
 
     button.textContent = ''; 
 
    } 
 
    } 
 
});

<table border='1' id="editTable"> 
 
    <tr> 
 
    <td><span>John</span></td> 
 
    <td><span>Doe</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span>Jane</span></td> 
 
    <td><span>Doe</span></td> 
 

 
    </tr> 
 
</table>

Answer 3

添加类

.red { 
color: red; 
} 

后和

后

button.textContent = '-=>SAVE<=-'; 
button.className += "red";