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无需与const span = td.firstElementChild;混淆

3-使用e.target.textContent时无需使用const td = button.parentNode;，const td = span.closest('td');将返回点击范围的文字

4-将td更改为span，因为b将不再是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; }的父节点

纯Javascript

＆＃13;

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

＆＃13;

$(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>');
    
  }
});

＆＃13;

b {
  color: red;
}

＆＃13;

<强> JQUERY

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 2

无需添加自定义标记和额外的CSS，只需在插入SAVE后添加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";

jquery在两个标记之间插入文本（即：<b> <span>插入文本</span> </b>）

3 个答案: