Search code examples
javascriptjqueryhtmlcssbootstrap-table

Save Button on a Table in Javascript Not Working

I have this javascript which will allow a user to hit the edit button on a table and edit the content. They can then press save to save the new input. I want to do 4 things which I don't know how to do.

  1. I want to remove the border from the input box after the edit button has been pressed and then the save button is pressed.

  2. Once the save button is pressed I want the Edit, Save, and Delete Button to go back to the same format they were at before pressing Edit.

  3. I want the select picker to be read only when the edit button has not been clicked.

  4. Instead of Having the words "Edit","Save" and "Delete" I want to use font awesome icons.

I have uploaded the JS, CSS, and HTML code here.

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>

Solution

  • Here you go you can use the following.

    $(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 = "";
}

    There are several errors in your code, so i revised it but the chore_text name input is not defined and i cant figure out why are you using it so i commented out the lines involved with that input, but the things you addressed are here you can see, just one thing I could not get your 2nd point the buttons that you want to switch back to the previous layout. They never change or maybe I am not getting what you said, I have commented out the portions for you to fix that are buggy, but the problem you are concerned I have added the solution.

    $(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>