CODEWITHSUNDEEP
javascriptjqueryhtml
Jarred
Jarred

Reputation: 175

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

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

Upvotes: 3

Views: 69

Answers (3)

Andrei Todorut
Andrei Todorut

Reputation: 4536

Working fiddle: https://jsbin.com/zizayoyufu/2/edit?js,console,output

Your JS adjusted to work:

//ADD NEW ROW
function addRow() {
  var lastRow = $('table tr:last');
  const processField = lastRow.children()[0].innerText;
  const processIdRegex = new RegExp("\\d+");
  let processId = 0;

  if(processIdRegex.test(processField)) {
    processId = parseInt(processField.match(processIdRegex)[0]);
  }

  var lastProcessNumber = processId;

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

parseInt returns NaN if the first character encoutered is string.

Upvotes: 1

Mamun
Mamun

Reputation: 68923

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>

Upvotes: 2

bassxzero
bassxzero

Reputation: 5041

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

Upvotes: 1

Related Questions