javascript - 编辑、保存、向动态表添加功能

Question

我正在尝试使用 javascript 向动态表中的一列(名称列)添加编辑、保存、添加行功能，这里是代码片段(代码链接，这是可编辑的):https://www.jdoodle.com/h/1IU
我的代码目前存在的问题:

每当我编辑任何行时，只会编辑第一行。

编辑后保存消失。

const is_weekend = function (dt) {
  if (dt.getDay() == 6 || dt.getDay() == 0) return true;
  else false;
};

var array = ["Ram", "Shyam"];
var currArrIndex = 0;

var start = new Date();
var end = new Date("2021-10-02");
var rows = Array();
var days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
var currDate = start;
//console.log(currDate);
while (currDate <= end) {
  //alert(currDate);
  //console.log(currDate);
  if (is_weekend(currDate)) {
    //if the date is a weekend date
    let dayName = days[currDate.getDay()]; //get week day of the current date
    let rowElement = {
      name: array[currArrIndex], //set one of the names from array from first to last
      day: dayName,
      date: currDate.toLocaleDateString(),
    };
    rows.push(rowElement);
    if (currDate.getDay() == 0) {
      //change after every week
      currArrIndex++; //current index array name is already assigned to last weekend, hence move to next array name
      currArrIndex %= array.length; //if current index goes beyond array length resign to 0
    }
  }

  var newDate = currDate.setDate(currDate.getDate() + 1);
  currDate = new Date(newDate);
}

var html = "<table border='1|1'>";
let htmlElementBoot = `
  <div class="container">
<div class="col-md12">
    <div class="panel panel-default">
      
<table class="table table-condensed table-striped">
  <tbody>
  <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
    <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
    <td>Orbital</td>
  </tr>
    <tr>
      <td colspan="12" class="hiddenRow">
          <div class="accordian-body collapse" id="demo3"> 
            <table class="table table-striped">
              <thead>
                <tr class="info">
                  <th>Name</th>
                  <th>Day</th>
                  <th>Date</th> 
                  <th>Action</th>   
                </tr>
              </thead>  
                    
   <tbody>
                  `;
let htmlElementCol = `
  <tr>
    <td><b>Name</b></td>
    <td><b>Day</b></td>
    <td><b>Date</b></td>
  </tr>`;
html += htmlElementBoot;
//html+=htmlElementCol;

for (var i = 0; i < rows.length; i++) {
  let htmlElement = `
  <tr>
  <td id="name_row">${rows[i].name}</td>
  <td id="dayRow">${rows[i].day}</td>
  <td id="dateRow">${rows[i].date}</td>
  <td>
    <input type="button" id="edit_button" value="Edit" class="edit" onclick="edit_row()">
    <input type="button" id="save_button" value="Save" class="save" onclick="save_row()">
  </td>
  </tr>`;
  html += htmlElement;
}
html += "</table>";

document.getElementById("box").innerHTML = html;

function edit_row() {
  document.getElementById("edit_button").style.display = "none";
  var name = document.getElementById("name_row");
  var name_data = name.innerHTML;
  name.innerHTML =
    "<input type='text' id='name_text" + "' value='" + name_data + "'>";
}

function save_row() {
  var name_val = document.getElementById("name_text").value;

  document.getElementById("name_row").innerHTML = name_val;

  document.getElementById("edit_button").style.display = "block";
  document.getElementById("save_button").style.display = "none";
}

<div id="box"></div>

Answer 1

您需要为您的可编辑标签添加唯一 ID，如下所示: <td id="name_row${i}">${rows[i].name}</td>并编辑然后保存该标签具有相应的 ID，如下所示:onclick="edit_row(${i})"完整代码:

const is_weekend = function (dt) {
            if (dt.getDay() == 6 || dt.getDay() == 0) return true;
            else false;
        };

        var array = ["Ram", "Shyam"];
        var currArrIndex = 0;

        var start = new Date();
        var end = new Date("2021-10-02");
        var rows = Array();
        var days = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
        ];
        var currDate = start;
        //console.log(currDate);
        while (currDate <= end) {
            //alert(currDate);
            //console.log(currDate);
            if (is_weekend(currDate)) {
                //if the date is a weekend date
                let dayName = days[currDate.getDay()]; //get week day of the current date
                let rowElement = {
                    name: array[currArrIndex], //set one of the names from array from first to last
                    day: dayName,
                    date: currDate.toLocaleDateString(),
                };
                rows.push(rowElement);
                if (currDate.getDay() == 0) {
                    //change after every week
                    currArrIndex++; //current index array name is already assigned to last weekend, hence move to next array name
                    currArrIndex %= array.length; //if current index goes beyond array length resign to 0
                }
            }

            var newDate = currDate.setDate(currDate.getDate() + 1);
            currDate = new Date(newDate);
        }

        var html = "<table border='1|1'>";
        let htmlElementBoot = `
          <div class="container">
<div class="col-md12">
            <div class="panel panel-default">

<table class="table table-condensed table-striped">
          <tbody>
          <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
            <td>Orbital</td>
          </tr>
            <tr>
              <td colspan="12" class="hiddenRow">
                  <div class="accordian-body collapse" id="demo3">
                    <table class="table table-striped">
                      <thead>
                        <tr class="info">
                          <th>Name</th>
                          <th>Day</th>
                          <th>Date</th>
                          <th>Action</th>
                        </tr>
                      </thead>

           <tbody>
                          `;
        let htmlElementCol = `
          <tr>
            <td><b>Name</b></td>
            <td><b>Day</b></td>
            <td><b>Date</b></td>
          </tr>`;
        html += htmlElementBoot;
        //html+=htmlElementCol;

        for (var i = 0; i < rows.length; i++) {
            let htmlElement = `
          <tr>
          <td id="name_row${i}">${rows[i].name}</td>
          <td id="dayRow">${rows[i].day}</td>
          <td id="dateRow">${rows[i].date}</td>
          <td>
            <input type="button" id="edit_button${i}" value="Edit" class="edit" onclick="edit_row(${i})">
            <input type="button" style="display:none" id="save_button${i}" value="Save" class="save" onclick="save_row(${i})">
          </td>
          </tr>`;
            html += htmlElement;
        }
        html += "</table>";

        document.getElementById("box").innerHTML = html;

        function edit_row(i) {
            document.getElementById("edit_button" + i).style.display = "none";
            var name = document.getElementById("name_row" + i);
            var name_data = name.innerHTML;
            name.innerHTML =
                "<input type='text' id='name_text" + i + "' value='" + name_data + "'>";

            document.getElementById("save_button" + i).style.display = "block";
        }

        function save_row(i) {
            var name_val = document.getElementById("name_text" + i).value;

            document.getElementById("name_row" + i).innerHTML = name_val;

            document.getElementById("edit_button" + i).style.display = "block";
            document.getElementById("save_button" + i).style.display = "none";
        }

<div id="box"></div>