Question

我想在用户点击更新按钮时将文本更改为输入。它将更改1行中的所有文本。以下是我做的例子。如何更改所有要输入的文本？我能够隐藏文本但坚持将所有内容更改为输入。

＆＃13;

var button = document.querySelectorAll('.upd');
var tableColumn = document.querySelectorAll('td'),
  rows;

for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    var span = this.parentNode.parentNode.querySelectorAll('span');

    for (var i = 0; i < span.length; i++) {
      span[i].style.display = 'none';
      text = span[i].innerHTML;
    }

    // Create an input
    input = document.createElement("input");
    input.type = "text";
    input.value = text;
    input.size = Math.max(text.length / 4 * 4, 4);
    rows = this.parentNode.parentNode.children;
    // console.log(rows[0].children[0]);
    rows[0].children[0].parentNode.insertBefore(input, rows[0].children[0]);

  });
}

＆＃13;

td,
tr,
th {
  border: 1px solid black;
  padding: 5px
}

table {
  border-collapse: collapse;
}

＆＃13;

<table style="border: 1px solid black;">
  <thead>
    <tr>
      <th>Account Name</th>
      <th>Username</th>
      <th>Password</th>
      <th>remark</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>text 1</span></td>
      <td><span>text 2</span> </td>
      <td><span>text 3</span></td>
      <td><span>text 4</span></td>
      <td>
        <button class="upd">Update</button> <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

您应该注意不要隐式创建全局变量。迭代每个td，隐藏span并相应地创建input。此外，由于span包含文字，您应该使用textContent而不是innerHTML：

＆＃13;

var button = document.querySelectorAll('.upd');
var tableColumn = document.querySelectorAll('td'),
  rows;

for (let i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    const tds = button[i].parentElement.parentElement.children;
    [...tds].forEach((td) => {
      const span = td.children[0];
      span.style.display = 'none';
      const text = span.textContent;
      const input = td.appendChild(document.createElement('input'))
      input.value = text;
      input.size = Math.max(text.length / 4 * 4, 4);
    });
  });
}

＆＃13;

td,
tr,
th {
  border: 1px solid black;
  padding: 5px
}

table {
  border-collapse: collapse;
}

＆＃13;

<table style="border: 1px solid black;">
  <thead>
    <tr>
      <th>Account Name</th>
      <th>Username</th>
      <th>Password</th>
      <th>remark</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>text 1</span></td>
      <td><span>text 2</span> </td>
      <td><span>text 3</span></td>
      <td><span>text 4</span></td>
      <td>
        <button class="upd">Update</button> <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

var button = document.querySelectorAll('.upd');
var tableColumn = document.querySelectorAll('td'),
  rows;

for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    var span = this.parentNode.parentNode.querySelectorAll('span');

    for (var i = 0; i < span.length; i++) {
      //span[i].style.display = 'none';
      text = span[i].innerHTML; 
            span[i].innerHTML = ' ';

            // Create an input
            input = document.createElement("input");
            input.type = "text";
            input.value = text;
            input.size = Math.max(text.length / 4 * 4, 4);

            span[i].appendChild(input);
    }
  });
}

Answer 3

您可以使用jQuery尝试此代码，它更简单https://codepen.io/gio0157/pen/deXXvz?editors=1010

 <table>
  <thead>
    <tr>
      <th>Account Name</th>
      <th>Username</th>
      <th>Password</th>
      <th>remark</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>text 1</span><input type="text" class="hide"/></td>
      <td><span>text 2</span><input type="text" class="hide"/></td>
      <td><span>text 3</span><input type="text" class="hide"/></td>
      <td><span>text 4</span><input type="text" class="hide"/></td>
      <td>
        <button class="upd" id="update">Update</button> <button class="del" id="delete">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
td,th {
  border: solid 1px black;
  text-align: center;
  padding: 0;
  margin: 0;
  width: calc(100% / 5);
}
.hide{
  display: none;
}



$(document).ready(function(){
  $('#update').click(function(){
    if(!$(this).hasClass('active')){
      $(this).addClass('active');
      $('td span').addClass('hide');
      $('td input').removeClass('hide');
      let inputs = $('td input');
      for(let i=0; i<inputs.length; i++){
        $(inputs[i]).val($(inputs[i]).siblings().text());      
      }
    }else{
      $(this).removeClass('active');
      $('td span').removeClass('hide');
      $('td input').addClass('hide');

      let texts = $('td span');
      for(let i=0; i<texts.length; i++){
        $(texts[i]).html($(texts[i]).siblings().val());      
      }
    }
    $('#delete').click(function(){
      $(this).removeClass('active');
      $('td span').removeClass('hide');
      $('td input').addClass('hide');

      let inputs = $('td input');
      for(let i=0; i<inputs.length; i++){
        $(inputs[i]).val($(inputs[i]).siblings().text());      
      }
    });
  });
});

Answer 4

在 span 之后立即将输入元素作为HTML输出的一部分包含在内，使其变得简单。使用以下功能切换黑白。

function onClickShowInput(evt) {
    evt.target.className = 'hide'
    evt.target.nextElementSibling.className = ''
}

类似于输入显示范围的模糊。

function onBlurShowSpan(evt) {
    evt.target.className = 'hide'
    evt.target.previousElementSibling.className = ''
}

最后附上相关事件。

document.querySelectorAll('span').forEach(span => span.addEventListener('click', onClickShowInput))
document.querySelectorAll('input').forEach(input => input.addEventListener('click', onBlurShowSpan))

将文本更改为一行输入

4 个答案: