jQuery在两个标签之间<span>插入文本</span> （即：insert <span>text</span> ）

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演示

Answer 1

问题是：

1-您的代码未将<span>附加到<b>

2-无需在button span将自己与button混淆

3-无需使用const span = td.firstElementChild; 当您使用e.target.textContent ，它将返回单击范围的文本

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

纯Java脚本

 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'; 插入保存后

 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";