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

如果parseInt在指定的基数中遇到的字符不是数字，它将忽略该字符和所有后续字符，并返回到该点为止已解析的整数值。 parseInt将数字截断为整数值。允许使用前导和尾随空格。

用空字符串替换字符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>

Answer 2

innerText中有一个P，它阻止了parseInt()的正确解析。

用空字符串替换文本中没有数字的所有内容，以便parseInt()起作用。

此

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

成为

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

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

Answer 3

工作中的小提琴： https://jsbin.com/zizayoyufu/2/edit?js,console,output

您的JS已调整为可以工作：

//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返回NaN。

解析带有字母和数字的字符串到整数的问题

3 个答案: