javascript - 将带有字母和数字的字符串解析为整数的问题

Question

我正在处理一个通过添加按钮添加行的表格。 当一个新行被添加到表中时，从 P0 开始的“进程列”应该被解析为一个整数，并且 1 应该被添加到最后一行的进程中。但是，这仅适用于显示 PNaN 之后的一个进程。代码中的什么可能导致此问题？谢谢

<div class="container inline">
  <div class="row">
    <table class="table" id="configTable">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Process</th>
          <th scope="col">Arrival Time</th>
          <th scope="col">Burst Time</th>
          <th scope="col">Quantum</th>
          <th scope="col">Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">P0</th>
          <td>0</td>
          <td><input autofocus class="burstTime" type="number" min="1" max="15"></td>
          <td><input class="quantumTime" type="number" min="1" max="10"></td>
          <td><input class="priorityTime" type="number" min="1" max="10"></td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="+" onclick="addRow();">
    <input id="del" type="button" value="-" onclick="deleteRow();">
  </div>
</div>

//ADD NEW ROW
function addRow() {
  var lastRow = $('table tr:last');
  var lastProcessNumber = parseInt(lastRow.children()[0].innerText);

  var newRow = '<tr><th>P'
  + (lastProcessNumber + 1)
  + '</td><td><input class="arrivalTime" type="number"/>'
  + '</td><td><input class="burstTime" type="number"/></td>'
  + '</td><td><input class="quantumTime" type="number"/></td>'
  + '</td><td><input class="priorityTime" type="number"/></td>'

  lastRow.after(newRow);

Answer 1

parseInt()

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

用空字符串替换字符P:

var lastProcessNumber = parseInt(lastRow.children()[0].innerText.replace('P',''));

//ADD NEW ROW
function addRow() {
  var lastRow = $('table tr:last');
  var lastProcessNumber = parseInt(lastRow.children()[0].innerText.replace('P',''));
  var newRow = '<tr><th>P'
  + (lastProcessNumber + 1)
  + '</td><td><input class="arrivalTime" type="number"/>'
  + '</td><td><input class="burstTime" type="number"/></td>'
  + '</td><td><input class="quantumTime" type="number"/></td>'
  + '</td><td><input class="priorityTime" type="number"/></td>'

  lastRow.after(newRow)
  
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container inline">
  <div class="row">
    <table class="table" id="configTable">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Process</th>
          <th scope="col">Arrival Time</th>
          <th scope="col">Burst Time</th>
          <th scope="col">Quantum</th>
          <th scope="col">Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">P0</th>
          <td>0</td>
          <td><input autofocus class="burstTime" type="number" min="1" max="15"></td>
          <td><input class="quantumTime" type="number" min="1" max="10"></td>
          <td><input class="priorityTime" type="number" min="1" max="10"></td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="+" onclick="addRow();">
    <input id="del" type="button" value="-" onclick="deleteRow();">
  </div>
</div>