编辑按钮在表中不起作用

Question

我正在为用户创建数据; e为用户添加主题后，他们可以更改描述，但不能更改代码。我能够添加和删除内容，但不知道如何只编辑描述列。我是javascript和jquery的新手，所以不知道如何合并这个

Javascript

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name = "chkbox[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "txtbox[]";
  cell2.appendChild(element2);

  var cell3 = row.insertCell(2);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.name = "txtbox[]";
  cell3.appendChild(element3);

  var cell4 = row.insertCell(3);
  var element4 = document.createElement("input");
  element4.type = "checkbox";
  element4.name = "chkbox[]";
  cell4.appendChild(element4);
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

使用的HTML是

<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br>
<br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br>
<br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br>
<br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <th></th>
      <th>Subject Code</th>
      <th>Subject Description</th>
      <th>Enrol?</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="chk[]">
      </td>
      <td>
        <input type="text" name="subcode[]">
      </td>
      <td>
        <input type="text" name="subdesc[]">
      </td>
      <td>
        <input type="checkbox" name="enrol[]">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您是否期待这样的事情？
在用户使用JQuery更改事件更改subject code字段后，我只读取function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name = "chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; element2.className = 'sub'; cell2.appendChild(element2); var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "text"; element3.name = "txtbox[]"; cell3.appendChild(element3); var cell4 = row.insertCell(3); var element4 = document.createElement("input"); element4.type = "checkbox"; element4.name = "chkbox[]"; cell4.appendChild(element4); } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } $('body').on('change', '.sub', function(e) { $(this).attr('readonly', 'readonly'); });字段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br><br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br><br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br><br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <th></th>
      <th>Subject Code</th>
      <th>Subject Description</th>
      <th>Enrol?</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="chk[]"></td>
      <td><input type="text" name="subcode[]" class="sub"></td>
      <td><input type="text" name="subdesc[]"></td>
      <td><input type="checkbox" name="enrol[]"></td>
    </tr>
  </tbody>
</table>

<ng-container *ngIf="choices[0].isArray">

Answer 2

重新开始主题

 <td><input type="text" name="subcode[]"  readonly class="sub"></td>


 var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'sub';
element2.setAttribute('readonly',true) 
cell2.appendChild(element2);