Javascript 中 Table 上的保存按钮不起作用

Question

我有这个 javascript，它允许用户点击 table 上的编辑按钮并编辑内容。然后他们可以按保存以保存新输入。我想做 4 件我不知道该怎么做的事情。

我想在按下编辑按钮然后按下保存按钮后从 input 框中删除边框。
按下保存按钮后，我希望 Edit、Save 和 Delete 按钮返回到按下前的相同格式编辑。
当 edit 按钮未被点击时，我希望 select 选择器为 read only。
我不想使用“Edit”、“Save”和“Delete”这些词，而是使用字体很棒的图标。

我已经在此处上传了 JS、CSS 和 HTML 代码。

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

  var chore = document.getElementById("chore_row" + no);
  var duration = document.getElementById("duration_row" + no);

  var chore_data = chore.innerHTML;
  var duration_data = duration.innerHTML;

  chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
  duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}

function save_row(no) {
  var chore_val = document.getElementById("chore_text" + no).value;
  var duration_val = document.getElementById("duration_text" + no).value;
  var rotation_val = document.getElementById("rotation_text" + no).value;

  document.getElementById("chore_row" + no).innerHTML = chore_val;
  document.getElementById("duration_row" + no).innerHTML = duration_val;
  document.getElementById("rotation_row" + no).innerHTML = rotation_val;

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

}

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
}

function add_row() {
  var new_chore = document.getElementById("new_chore").value;
  var new_duration = document.getElementById("new_duration").value;

  var table = document.getElementById("ChoreTbl");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "" +
    "<tr id='row" + table_len + "'>" +
    "   <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
    "   <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
    "   <td id='rotation_row'" + table_len + "'>" +
    "<select class='selectpicker1'>" +
    "<option>Daily</option>" +
    "<option>Weekly</option>" +
    "<option>Monthly</option>" +
    "</select>" +
    "</td>" +
    "   <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
    "       <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
    "       <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
    "   </td>" +
    "</tr>";

  document.getElementById("new_chore").value = "";
  document.getElementById("new_duration").value = "";
  document.getElementById("new_rotation").value = "";
}

input {
  background-color: #fff1d9;
  border: solid;
  border-color: #fea680;
}

.pageButton {
  border: none;
}

<section class="Chores">
  <table id="ChoreTbl" class="choreHead">
    <h1><b>Chore Setting</b></h1>

    <thead>
      <tr class="header" style="color:#008f95;">
        <td id="name_row2"><b>Chore</b></td>
        <td id="country_row2"><b>Time Frame to Complete</b></td>
        <td id="age_row2"><b>Rotation Cycle</b></td>
        <td></td>
    </thead>
    <tbody>
      <tr id="row1">
        <td id="chore_row1">Wash Floor</td>
        <td id="duration_row1">3 days</td>
        <td id="rotation_row1">
          <select class="selectpicker1">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </td>
        <td>
          <input type="button" id="edit_button1" value="Edit" class="edit pageButton" onclick="edit_row('1')">
          <input type="button" id="save_button1" value="Save" class="save pageButton" onclick="save_row('1')">
          <input type="button" value="Delete" class="delete pageButton" onclick="delete_row('1')">
        </td>
      </tr>
      <tr>
        <td><input type="text" id="new_chore"></td>
        <td><input type="text" id="new_duration"></td>
        <td>
          <select class="selectpicker1">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </td>
        <td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
      </tr>
    </tbody>
  </table>

Answer 1

好了，您可以使用以下内容。

$(document).ready(function() {
  $("select").attr('disabled', true);
});


function edit_row(no) {
  $("select").attr("disabled", false);
  $("edit_button" + no).show();
  $("save_button" + no).show();

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

  var chore = document.getElementById("chore_row" + no);
  var duration = document.getElementById("duration_row" + no);

  var chore_data = chore.innerHTML;
  var duration_data = duration.innerHTML;

  chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
  duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}

function save_row(no) {
  $("input[type='text']").css({
    border: 0
  });

  $("#edit_button" + no).show();


  var chore_val = $("chore_text" + no).value;

  var duration_val = $("#duration_text" + no).val();
  var rotation_val = $("#rotation_text" + no).val();

  $("#chore_row" + no).html(chore_val);
  $("#duration_row" + no).html(duration_val);
  $("#rotation_row" + no).html(rotation_val);

  $("#edit_button" + no).show();
  $("#save_button" + no).show();


}

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
}

function add_row() {
  var new_chore = document.getElementById("new_chore").value;
  var new_duration = document.getElementById("new_duration").value;

  var table = document.getElementById("ChoreTbl");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "" +
    "<tr id='row" + table_len + "'>" +
    "   <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
    "   <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
    "   <td id='rotation_row'" + table_len + "'>" +
    "<select class='selectpicker1'>" +
    "<option>Daily</option>" +
    "<option>Weekly</option>" +
    "<option>Monthly</option>" +
    "</select>" +
    "</td>" +
    "   <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
    "       <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
    "       <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
    "   </td>" +
    "</tr>";

  document.getElementById("new_chore").value = "";
  document.getElementById("new_duration").value = "";
  document.getElementById("new_rotation").value = "";
}

你的代码中有几个错误，所以我修改了它，但是 chore_text 名称输入没有定义，我不知道你为什么要使用它，所以我注释掉了与该输入相关的行，但是您可以看到您解决的问题，只有一件事我无法让您 2nd 点 您想要切换回以前的布局的按钮 。他们永远不会改变或者我可能没有明白你说的，我已经注释掉了你要修复的部分是错误的，但是你关心的问题我已经添加了解决方案。

$(document).ready(function() {
  $("select").attr('disabled', true);
});

function edit_row(no) {
  $("#selectpicker" + no).attr("disabled", false);

  $("#save_button" + no).show();

  var chore = $("#chore_row" + no);
  var duration = $("#duration_row" + no);

  var chore_data = chore.html();
  var duration_data = duration.html();

  chore.html("<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>");
  duration.html("<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>");
  $("input[type='text']").css({
    border: 0
  });
}

function save_row(no) {
  var chore_val = $("#chore_text" + no).val();
  var duration_val = $("#duration_text" + no).val();
  var rotation_val = $("#rotation_text" + no).val();

  $("#chore_row" + no).html(chore_val);
  $("#duration_row" + no).html(duration_val);
  $("#rotation_row" + no).html(rotation_val);

  $("#edit_button" + no).show();
  //$("#save_button" + no).hide();
  $("#selectpicker" + no).attr("disabled", true);
}

function delete_row(no) {
  //  $("#row" + no + "").clone().wrap('<p>').parent().html('');
  document.getElementById("row" + no + "").outerHTML = "";

}

function add_row() {
  var new_chore = $("#new_chore").val();
  var new_duration = $("#new_duration").val();

  var table = document.getElementById("ChoreTbl");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "" +
    "<tr id='row" + table_len + "'>" +
    "   <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
    "   <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
    "   <td id='rotation_row" + table_len + "'>" +
    "<select disabled class='selectpicker1' id='selectpicker" + table_len + "'>" +
    "<option>Daily</option>" +
    "<option>Weekly</option>" +
    "<option>Monthly</option>" +
    "</select>" +
    "</td>" +
    "   <td><i id='edit_button" + table_len + "'  class='fa fa-pencil' onclick='edit_row(" + table_len + ")'></i> " +
    "       <i id='save_button" + table_len + "' class='fa fa-floppy-o' onclick='save_row(" + table_len + ")'></i> " +
    "       <i class='fa fa-trash' onclick='delete_row(" + table_len + ")'></i>" +
    "   </td>" +
    "</tr>";

  $("#new_chore").val();
  $("#new_duration").val();
  //document.getElementById("new_rotation").value = "";
}

input {
  background-color: #fff1d9;
  border: solid;
  border-color: #fea680;
}

.pageButton {
  border: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Chores">
  <table id="ChoreTbl" class="choreHead">
    <h1><b>Chore Setting</b></h1>

    <thead>
      <tr class="header" style="color:#008f95;">
        <td id="name_row2"><b>Chore</b></td>
        <td id="country_row2"><b>Time Frame to Complete</b></td>
        <td id="age_row2"><b>Rotation Cycle</b></td>
        <td></td>
    </thead>
    <tbody>
      <tr id="row1">
        <td id="chore_row1">Wash Floor</td>
        <td id="duration_row1">3 days</td>
        <td id="rotation_row1">
          <select class="selectpicker1" id="selectpicker1">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </td>
        <td>
          <i id="edit_button1" class="fa fa-pencil" onclick="edit_row('1')"></i>
          <i id="save_button1" class="fa fa-floppy-o" onclick="save_row('1')"></i>
          <i class="fa fa-trash" onclick="delete_row('1')"></i>
        </td>
      </tr>
      <tr>
        <td><input type="text" id="new_chore"></td>
        <td><input type="text" id="new_duration"></td>
        <td>
          <select class="selectpicker1">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </td>
        <td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
      </tr>
    </tbody>
  </table>

Javascript 中 Table 上的保存按钮不起作用

Save Button on a Table in Javascript Not Working

html

javascript

css

jquery

bootstrap-table