Question

如何将编辑后的数据保存在同一行上？以及如何在单击保存按钮后删除属性readOnly。

var textBorder = "1px solid green";
$(document).ready(function() {

  $(".edit").click(function() {
    var rowparent = $(this).closest("tr");
    selectElement(rowparent, ".idno");
    selectElement(rowparent, ".name");
    selectElement(rowparent, ".course");

    $(this).val("Save");
    $(rowparent).find(".idno").focus();
    $(rowparent).find(".idno").select();
  });

  $(".editall").click(function() {
    var rowparent = $(".tbody").find("tr");
    selectElement(rowparent, ".idno");
    selectElement(rowparent, ".name");
    selectElement(rowparent, ".course");
  });

  $(".saveAll").click(function() {
    //And also what should i do here?
  });

});

function selectElement(row, elementName) {
  $(row).find(elementName).removeAttr("readOnly").css("border", textBorder);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Sample jQuery Table</title>
</head>

<body>
  <table border="1" cellpadding="3">
    <thead>
      <tr>
        <th>ID No.</th>
        <th>Name</th>
        <th>Course</th>
        <th></th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr class="row">
        <td>
          <input type="text" class="idno" value="001" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="name" value="Joaquin Patino" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
      <tr class="row">
        <td>
          <input type="text" class="idno" value="002" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="name" value="Juan Dela Cruz" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
      <tr class="row">
        <td>
          <input type="text" class="idno" value="003" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="name" value="Maria Santos" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="button" class="editall" value="Edit All" />
  <input type="button" class="saveAll" value="Save All" />
</body>

</html>

Answer 1

可以通过在行上切换类来简化所有操作。将该类用于样式并确定当前状态。

使用将行和editMode布尔值作为参数的函数可以简化所有按钮的使用。

布尔值用于通过prop()设置只读状态，并在行上设置为toggleClass()并设置编辑按钮的值

在执行所有行时，布尔值由单击“全部”按钮中的哪个按钮决定

$(document).ready(function() {

  $(".edit").click(function() {    
    var $row = $(this).closest("tr");
    var doEdit = !$row.hasClass('edit-mode');
    toggleRowEdit($row, doEdit);
  });

  $('.editall, .saveAll').click(function(){
     var doEdit = $(this).hasClass('editall');
     // loop over all rows and toggle state of each
     $('tbody tr').each(function(){
        toggleRowEdit($(this), doEdit);
     });
  });

});

function toggleRowEdit($row, doEdit) {
  $row.toggleClass('edit-mode', doEdit)
  $row.find('.idno, .name, .course').prop('readOnly', !doEdit);
  $row.find('.edit').val(doEdit ? 'Save' : 'Edit');
  if (doEdit) {
    $row.find(".idno").focus().select();
  }
}

tr.edit-mode input[type=text] {
  border: 1px solid green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Sample jQuery Table</title>
</head>

<body>
  <table border="1" cellpadding="3">
    <thead>
      <tr>
        <th>ID No.</th>
        <th>Name</th>
        <th>Course</th>
        <th></th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr class="row">
        <td>
          <input type="text" class="idno" value="001" readOnly="true"  />
        </td>
        <td>
          <input type="text" class="name" value="Joaquin Patino" readOnly="true" />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true"  />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
      <tr class="row">
        <td>
          <input type="text" class="idno" value="002" readOnly="true"  />
        </td>
        <td>
          <input type="text" class="name" value="Juan Dela Cruz" readOnly="true"  />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true"  />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
      <tr class="row">
        <td>
          <input type="text" class="idno" value="003" readOnly="true"  />
        </td>
        <td>
          <input type="text" class="name" value="Maria Santos" readOnly="true"  />
        </td>
        <td>
          <input type="text" class="course" value="BSIT" readOnly="true"  />
        </td>
        <td>
          <input type="button" class="edit" value="Edit" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="button" class="editall" value="Edit All" />
  <input type="button" class="saveAll" value="Save All" />
</body>

</html>

保存输入文本中的编辑数据并删除readOnly属性

1 个答案: