从引导模式编辑表行

Question

在这个项目中，我需要制作编辑表功能。 单击编辑按钮时，将出现一个模态。 模态将包含一个表单，该表单必须填充所选行的当前表数据，并且当单击保存按钮时将覆盖当前数据。 每个新行在添加到表格时都会有行ID和编辑按钮。

以下是摘录：

function add_row() {
  var code = document.getElementById('code').value;
  if (code == "") {
    alert("code empty!");
    return false;
  } else if (isNaN(code)) {
    alert("code must be numbers");
    return false;
  }

  var name = document.getElementById('name').value;
  if (name == "") {
    alert("name empty!");
    return false;
  } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) {
    alert("name must be letters");
    return false;
  }

  var year = document.getElementById('year').value;
  if (year == "") {
    alert("year empty!");
    return false;
  } else if (isNaN(year)) {
    alert("year must number");
    return false;
  }

  var major = document.getElementById('major').value;
  if (major == "") {
    alert("major empty!");
    return false;
  }

  var address = document.getElementById('address').value;
  if (address == "") {
    alert("address empty!");
    return false;
  }

  var email = document.getElementById('email').value;
  var et = email.indexOf("@");
  var dot = email.indexOf(".");
  if (email == "") {
    alert("email empty!");
    return false;
  } else if (et < 1 || dot < et + 2 || dot + 2 > email.length) {
    alert('email must has @ and domain');
    return false;
    console.log('failures');
  }

  var phone = document.getElementById('phone').value;
  if (phone == "") {
    alert("phone empty!");
    return false;
  } else if (isNaN(phone)) {
    alert("phone must number");
    return false;
  }

  var table = document.getElementsByTagName('table')[0];
  //var newRow = table.insertRow(table.rows.length / 2 + 1);

  var table = document.getElementById("data_table");
  var table_len = (table.rows.length/ 2+1) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='code_row" + table_len + "'>" + code + "</td><td id='name_row" + table_len + "'>" + name + "</td><td id='year_row" + table_len + "'>" + year + "</td><td id='major_row" + table_len + "'>" + major + "</td><td id='address_row" + table_len + "'>" + address + "</td><td id='email_row" + table_len + "'>" + email + "</td><td id='phone_row" + table_len + "'>" + phone + "</td> <td><input type='button' id='edit_button" + table_len + "' value='Edit' onclick='edit_row(" + table_len + ")' data-toggle='modal' data-target='#myModal2'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

}

function edit_row(no) {
  var code = document.getElementById("code_row" + no);
  var name = document.getElementById("name_row" + no);
  var year = document.getElementById("year_row" + no);
  var major = document.getElementById("major_row" + no);
  var address = document.getElementById("address_row" + no);
  var email = document.getElementById("email_row" + no);
  var phone = document.getElementById("phone_row" + no);

  code.value = document.getElementById("code_row" + no);
  name.value = document.getElementById("code_row" + no);
  year.value = document.getElementById("code_row" + no);
  major.value = document.getElementById("code_row" + no);
  address.value = document.getElementById("code_row" + no);
  email.value = document.getElementById("code_row" + no);
  phone.value = document.getElementById("code_row" + no);

  var code_data = name.innerHTML;
  var name_data = name.innerHTML;
  var year_data = year.innerHTML;
  var major_data = major.innerHTML;
  var address_data = address.innerHTML;
  var email_data = email.innerHTML;
  var phone_data = phone.innerHTML;

}

function save_row(no) {
  var code = document.getElementById('code').value;
  if (code == "") {
    alert("code empty!");
    return false;
  } else if (isNaN(code)) {
    alert("code must number");
    return false;
  }

  var name = document.getElementById('name').value;
  if (name == "") {
    alert("name empty!");
    return false;
  } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) {
    alert("name must letters");
    return false;
  }

  var year = document.getElementById('year').value;
  if (year == "") {
    alert("year empty!");
    return false;
  } else if (isNaN(year)) {
    alert("year must number");
    return false;
  }

  var major = document.getElementById('major').value;
  if (major == "") {
    alert("major empty!");
    return false;
  }

  var address = document.getElementById('address').value;
  if (address == "") {
    alert("address empty!");
    return false;
  }

  var email = document.getElementById('email').value;
  var et = email.indexOf("@");
  var dot = email.indexOf(".");
  if (email == "") {
    alert("email empty!");
    return false;
  } else if (et < 1 || dot < et + 2 || dot + 2 > email.length) {
    alert('email must contains @ and domain');
    return false;

  }

  var phone = document.getElementById('phone').value;
  if (phone == "") {
    alert("phone empty!");
    return false;
  } else if (isNaN(phone)) {
    alert("phone must number");
    return false;
  }

  var code_val = document.getElementById("code_row" + no).value;
  var name_val = document.getElementById("name_row" + no).value;
  var year_val = document.getElementById("year_row" + no).value;
  var major_val = document.getElementById("major_row" + no).value;
  var address_val = document.getElementById("address_row" + no).value;
  var email_val = document.getElementById("email_row" + no).value;
  var phone_val = document.getElementById("phone_row" + no).value;

  document.getElementById("code_row" + no).innerHTML = code_val;
  document.getElementById("name_row" + no).innerHTML = name_val;
  document.getElementById("year_row" + no).innerHTML = year_val;
  document.getElementById("major_row" + no).innerHTML = major_val;
  document.getElementById("address_row" + no).innerHTML = address_val;
  document.getElementById("email_row" + no).innerHTML = email_val;
  document.getElementById("phone_row" + no).innerHTML = phone_val;
}

function reset_form() 
{
    document.getElementById("myForm").reset();
}

<div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog modal-sm">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Data</h4>
      </div>

      <!--Body pop up-->
      <div class="modal-body">

        <form id="myForm">
          Code :
          <br>
          <input type="text" placeholder="code" name="code" id="code">

          <br>name :
          <br>
          <input type="text" placeholder="name" name="name" id="name">

          <br>year :
          <br>
          <input type="text" placeholder="year" name="year" id="year">

          <br>major :
          <br>
          <!--<input type="text" placeholder="major" name="major" id="major">-->
          <form action="/action_page.php" name="major" id="major">
            <select name="major" id="major">
                    <option value="Akuntansi">Akuntansi</option>
                    <option value="Teknik Infomatika">Teknik Informatika</option>
                    <option value="Psikologi">Psikologi</option>
                    <option value="Hukum">Hukum</option>
                    <option value="Politik">Politik</option>
                  </select>
          </form>

          address :
          <br>
          <!--<input type="text" placeholder="address" name="address" id="address">-->
          <textarea class="form-control" rows="1" placeholder="address" name="address" id="address"></textarea>

          <br>Email :
          <br>
          <input type="email" id="email" name="email" placeholder="email">

          <br>phone :
          <br>
          <input type="text" placeholder="phone" name="phone" id="phone">
        </form>

      </div>

      <div class="modal-footer">

        <button type="button" onClick="reset_form()" id="btnCancel" style="background-color:#800003" class="btn btn-default">Reset</button>
        <button type="button" onClick="save_row()" id="btnSave" style="background-color:#003300" class="btn btn-default">Save</button>

      </div>
    </div>
  </div>
</div>

Answer 1

现在制作干净的代码比干扰验证更重要，你必须对验证规则非常现实，否则它会非常容易地适得其反。

对您的代码提出一些进一步的建议：

• 您仍然缺少问题html代码段
上的<TABLE>元素
• 您仍然在javascript中有两个表DOM引用，文档上的第一个表（即document.getElementsByTagName('table')[0]）和ID为data_table的表。你只是在后面插入行。
• insertRow()不需要参数将新行附加到表的末尾，这是默认行为（请参阅here）。

此外，您可以将验证代码重构为函数，例如validate_error_message()。它应该返回验证错误消息或空字符串。例如，它的开头就是移植：

var code = document.getElementById('code').value;
if (code == "") {
  alert("code empty!");
  return false;
} else if (isNaN(code)) {
  alert("code must be numbers");
  return false;
}

到

function validate_error_message() {
    var code = document.getElementById('code').value;
    if (code == "") {
      return "code empty!";
    } else if (isNaN(code)) {
      return "code must be numbers";
    }
    /* ... more validations */
    return "";
}

现在，在add_row()和save_row()上，删除所有验证，并将代码包含在add_row()内：

function add_row() {
     var err_msg = validate_error_message();
     if (err_msg == "") {
         /* add_row() body */
     }
     else {
         alert(err_msg);
     } 
}