javascript - 列表中的按钮，如何使其 ''编辑''好行？

Question

我正在尝试通过单击按钮使列表行可编辑。 “编辑”按钮应该编辑与其匹配的行。目前，编辑按钮仅编辑第一行。

这是我在 Node.js 上开发的一个小程序。 HTML、CSS 和 Javascript 是我最常用的。

这是我的 HTML 正文:

<tr ng-repeat="offer in offers|limitTo:5">

   <td><button onclick="editOfferInfos()">Edit</button></td>

   <td id="offerNamePostfix" class="offerNamePostfix">{{offer.namePostfix}}</td>
   <td id="offerUrl" class="offerUrl">{{offer.url}}</td>
   <td id="offerLimitEnabled">{{offer.capConfiguration.enabled}}</td>
   <td id="offerLimit">{{offer.capConfiguration.limit}}</td>
   <td id="offerTimeUnit">{{offer.capConfiguration.timeUnit}}</td>
   <td id="offerReplacementOfferId">{{offer.capConfiguration.replacementOfferId.id}}</td>
</tr>

Javascript函数:

function editOfferInfos(){
  var x = document.getElementById("offerNamePostfix");
    x.innerHTML = "<input type='text'>";

  x = document.getElementById("offerUrl");
    x.innerHTML = "<input type='text' placeholder={offer.url}}>";
  x = document.getElementById("offerLimitEnabled");

    x.innerHTML = "<input type='text' placeholder={{offer.capConfiguration.enabled}}>";

  x = document.getElementById("offerLimit");
    x.innerHTML = "<input type='text' placeholder={{offer.capConfiguration.limit}}>";

  x = document.getElementById("offerTimeUnit");
    x.innerHTML = "<input type='text' placeholder={{offer.capConfiguration.timeUnit}}>";

  x = document.getElementById("offerReplacementOfferId");
    x.innerHTML = "<input type='text' placeholder={{offer.capConfiguration.replacementOfferId.id}}";
}

按钮“编辑按钮”应该将匹配的行与文本框相匹配。现在，它仅将第一行变成文本框，无论是第一个按钮还是最后一个按钮。

Answer 1

无需执行所有这些操作，只需单击按钮即可将当前行设置为 contentEditible = "true"。无需动态创建 HTML。

// Get all the "buttons" into an Array
let buttons = [].slice.call(document.querySelectorAll(".edit > span"));

// Loop over the array
buttons.forEach(function(button){
  // Set up event handler
  button.addEventListener("click", function(){
    // Locate the editable cell in the current row and make that cell editible
    this.closest("tr").querySelector(".editible").contentEditable  = "true";
  });
});

// For resetting the cells after editing.....

// Get all the editible cells into an Array
let editibleCells = [].slice.call(document.querySelectorAll(".editible"));

// Loop over the array
editibleCells.forEach(function(cell){
  // Set up event handler
  cell.addEventListener("blur", function(){
    this.contentEditable  = "false";  // Turn off editable for the current cell
  });
});

body { font-family:Calibri, Arial, Helvetica; }
table, td { border:1px dashed #e9e9e9; padding:3px; }
.edit > span { display:inline-block; border:1px solid #e0e0e0; padding:5px; background-color:#d0d0d0; cursor:pointer; border-radius:3px; }
[contenteditable="true"] { background:yellow; }

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td class="editible">Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
    <td class="edit"><span>Edit</span></td>
  </tr>
  <tr>
    <td class="editible">Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
    <td class="edit"><span>Edit</span></td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td class="editible">Row 3, Cell 3</td>
    <td class="edit"><span>Edit</span></td>
  </tr>
</table>