تغيير النص لإدخاله في صف

أرغب في تغيير النص إلى إدخال عندما ينقر المستخدم على زر التحديث. سيغير كل النص في صف واحد. أدناه هو المثال الذي صنعته. كيفية تغيير كل النص لإدخال؟ أتمكن من جعل النص مخفيًا ولكن تم تعطيله جميعًا للإدخال.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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]);

  });
}
td,
tr,
th {
  border: 1px solid black;
  padding: 5px
}

table {
  border-collapse: collapse;
}
<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>text 1</td>
      <td>text 2 </td>
      <td>text 3</td>
      <td>text 4</td>
      <td>
        <button class="upd">Update</button> <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>
</div> </div>
0
اجعله أكثر بساطة من خلال إنشاء علامات المدخلات التي تساعد في تنظيف رمز ومنطق js. لقد قمت بإضافة رمز المثال أدناه.
وأضاف المؤلف Muhammad Adeel, مصدر

4 إجابة

يجب الحرص على عدم إنشاء متغيرات عمومية ضمنيًا. قم بالتكرار فوق كل td ، وإخفاء span وإنشاء input s وفقًا لذلك. أيضًا ، نظرًا لأن span s تحتوي على نص ، يجب عليك استخدام textContent بدلاً من innerHTML :

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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);
    });
  });
}
td,
tr,
th {
  border: 1px solid black;
  padding: 5px
}

table {
  border-collapse: collapse;
}
<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>text 1</td>
      <td>text 2 </td>
      <td>text 3</td>
      <td>text 4</td>
      <td>
        <button class="upd">Update</button> <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>
</div> </div>
0
وأضاف
شكرا لك على الجواب والتفاصيل. هل لي أن أعرف ما هي النقطة (.) على [.. tds] .forEach تعني.
وأضاف المؤلف Khairul, مصدر
يقوم بتحويل tds ، HTMLCollection ، إلى صفيف. يمكن تكرار الصفائف باستخدام forEach ، بخلاف HTMLCollection s. ( forEach أو طرق الصفيف الأخرى غالباً ما تكون مفضّلة على للحلقات - التجريد الأفضل ، عدم التكرار اليدوي ، التأليف الوظيفي والنطاق) [... arrayLikeVar] يشبه Array.from .
وأضاف المؤلف CertainPerformance, مصدر
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);
    }
  });
}
0
وأضاف

You can try this code with jQuery it is more simple 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>text 1<input type="text" class="hide"/></td>
      <td>text 2<input type="text" class="hide"/></td>
      <td>text 3<input type="text" class="hide"/></td>
      <td>text 4<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
0
وأضاف

اجعل الأمر بسيطًا من خلال تضمين عناصر الإدخال كجزء من إخراج HTML ، بعد span مباشرةً. استخدم الوظائف التالية أدناه لتبديل b/w إليها.

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))
0
وأضاف