Problem parsing a String with a letter and a number to an Integer

Question

I'm working on a table which adds rows by add button. When a new row is added to the table the 'process column' which starts at P0 should be parsed to an integer and 1 should be added to the process of the last row. However this only works for one process after that it displays PNaN. What in the code could be causing this problem? Thanks

<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.

Replace the character P with empty string:

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>

Answer 2

There is a P in the innerText and it's preventing parseInt() from parsing correctly.

Replace anything in your text that not a number with the empty string so parseInt() works.

This

var lastProcessNumber = parseInt(lastRow.children()[0].innerText);

becomes

var lastProcessNumber = parseInt(lastRow.children()[0].innerText.replace(/[^\d]/,''));

https://jsbin.com/vizazinewe/edit?html,js,console,output