编辑按钮在表格中不起作用

Question

I am creating datab;e for user wherein after they have added the subject they can change the descrption but not the code. I am able to add and delete the content but not sure of how to edit only the description column.I am new to javascript and jquery so not sure of how to incorporate this

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 used is

<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

Are you expecting something like this?
I am making the subject code field readonly after the user changes it using JQuery change event.

 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> 

Answer 2

make the subject reeadonly

 <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);