在动态表HTML中不工作的修改按钮

Question

嗨，我正在尝试做一个修改预订页面，但我的表中的保存按钮不工作，没有输出。最初，我使用文本输入(保存仍在工作)，但更改为下拉，然后保存按钮停止工作。单击“保存”按钮后，所选的选项应该会在table.Please上重写前面的数据，帮助我查看一下。

我上传了密码。

编辑:这是当前结果的图像。

​

​

我希望从下拉列表中选择新的数据来替换表上的旧数据。

谢谢。

​

function edit_row(no) {
  document.getElementById("edit_button" + no).style.display = "none";
  document.getElementById("save_button" + no).style.display = "block";

  var date = document.getElementById("date_row" + no);
  var roomtype = document.getElementById("roomtype_row" + no);
  var stime = document.getElementById("stime_row" + no);


  var date_data = date.innerHTML;
  var roomtype_data = roomtype.innerHTML;
  var stime_data = stime.innerHTML;

  date.innerHTML = "<input type='date' min='2022-05-09' max='2022-05-13' id='date_text" + no + "' value='" + date_data + "'>";

  roomtype.innerHTML = '<select id="levels-list' + no + '">\
                            <option value="A" id="option-1">101</option>\
                            <option value="B" id="option-2">102</option>\
                            <option value="C" id="option-3">103</option>\
                            </select>';
  document.getElementById("levels-list" + no).value = roomtype_data;

  roomtype.onchange = function() {
    stime.innerHTML = '<select id="levels-list1' + no + '">\
                      <option value="A1" id="option-11">101</option>\
                      <option value="B1" id="option-22">102</option>\
                      <option value="C1" id="option-33">103</option>\
                      </select>';
    document.getElementById("levels-list1" + no).value = stime_data;
  }
}

function save_row(no) {
  var date_val = document.getElementById("date_text" + no).value;
  var roomtype_val = document.getElementById("roomtype_text" + no).value;
  var stime_val = document.getElementById("stime_text" + no).value;


  document.getElementById("date_row" + no).innerHTML = date_val;
  document.getElementById("roomtype_row" + no).innerHTML = roomtype_val;
  document.getElementById("stime_row" + no).innerHTML = stime_val;


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

  alert("Booking has been succesfully modified.");
}

<h1 id="middle">View your bookings</h1>

<span style="position:fixed ;left: 1350px; top: 155px;">Logout</span>
<span style="position:fixed ;left: 675px;top: 155px;"><a href="home page.html">Homepage</a></span>
<div id="wrapper">

  <table align='left' style="background-color:#001641;  padding-right: 750px; padding-top: 0px; padding-bottom: 400px;">
    <tr>
      <td>
        <table align='left' cellspacing=20px cellpadding=10px id="data_table" border=5 " style="width:200% " rules="all ">
    <tr>
    <th >Date</th>
    <th>Room type</th>
    <th>Time</th>
    <th></th>
    <th></th>
    </tr>
    
    <tr id="row1 ">
    <td id="date_row1 ">2022-05-10</td>
    <td id="roomtype_row1 ">101</td>
    <td id="stime_row1 ">09:00</td>
    <td>
    <input type="button " id="edit_button1 " value="Modify booking " class="edit " onclick="edit_row( '1') ">
    <input type="button " id="save_button1 " value="Save " class="save " onclick="save_row( '1') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '1') ">
    </td>
    </tr>
    
    <tr id="row2 ">
    <td id="date_row2 ">2022-05-09</td>
    <td id="roomtype_row2 ">102</td>
    <td id="stime_row2 ">13:00</td>
    <td>
    <input type="button " id="edit_button2 " value="Modify booking " class="edit " onclick="edit_row( '2') ">
    <input type="button " id="save_button2 " value="Save " class="save " onclick="save_row( '2') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '2') ">
    </td>
    </tr>
    
    <tr id="row3 ">
    <td id="date_row3 ">2022-05-11</td>
    <td id="roomtype_row3 ">101</td>
    <td id="stime_row3 ">10:00</td>
    <td>
    <input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '3') ">
    <input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '3') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '3') ">
    </td>
    </tr>
    
    <tr id="row4 ">
    <td id="date_row4 ">2022-05-11</td>
    <td id="roomtype_row4 ">103</td>
    <td id="stime_row4 ">16:00</td>
    <td>
    <input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '4') ">
    <input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '4') " hidden>
    </td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '4') ">
    </td>
    </tr>
    
    
    </table>
    </td>
    </tr>
    </table>
    </div>

​

Answer 1

你有很多排字，摆脱它们，它会像预期的那样工作。

我只是在一个文本编辑器中使用了一个简单的“替换：(‘’)”，它就开始工作了。

在您的代码中有：<input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '3') ">

您的函数期望：<input type="button" id="edit_button3" value="Modify booking" class="edit" onclick="edit_row( '3')">

您的id：'edit_button3 '，您的函数期望：‘编辑_纽扣3’.

但是，您也有一个重复的save_button3和edit_button3，但没有save_button4和edit_button3。

有一个几乎可以工作的剪短，您需要继续添加所需的功能，如"delete_row()“等。