how to call java script on new created html table row

Question

I have a table in which an input control calls a java script event oninput="this.value=this.value.replace(/[^0-9]/g,'');

By Clicking on Add Row new Row is being inserted but i want to call this event on new row as well . This event is to stop except positive whole numbers using the following code.

<html>
     <head>
       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    </head>
    <body>
    <input type="hidden" id="minsize" value="1">
    <div class="">
      <table id="mintable" class="table table-bordered table-striped stripe hover row-border">
        <thead class="div-head">
          <tr>
            <th><b>Roll No</b></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
          </tr>
        </tbody>
      </table>
      <input type="hidden" name="minRows" id="minRows" value='1'>
      <input type="hidden" id="sizemin" name="sizemin" value='1' />

    </div>
    <input type="submit" data-toggle="tooltip" title="Insert new horizon 
           " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />

     <script>

    function addRow() {
      var table = document.getElementById("mintable");
      var rowCount = parseInt(document.getElementById("minRows").value);
      var rowInsert = parseInt(document.getElementById("sizemin").value);
      var row = table.insertRow(rowInsert + 1);
      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      element1.type = "text";
      element1.id = "rollnoo" + (rowCount);
      element1.className = "form-control";
      cell1.appendChild(element1);
      rowCount = parseInt(rowCount)+ 1;
      document.getElementById("minRows").value = rowCount;
      document.getElementById("sizemin").value =
        parseInt(document.getElementById("sizemin").value) + 1;
      }
    
  </script>
  </body>
  </html>

element.oninput=function() {…} or delegate as in the duplicate — mplungjan, Jun 18 '18 at 03:50

score 0 · Answer 1 · 2018-06-18T03:59:12.497

Try the following syntax to add event handler to newly created element:

element1.oninput = function() {
  this.value = this.value.replace(/[^0-9]/g,'');
}

<html>
     <head>
       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    </head>
    <body>
    <input type="hidden" id="minsize" value="1">
    <div class="">
      <table id="mintable" class="table table-bordered table-striped stripe hover row-border">
        <thead class="div-head">
          <tr>
            <th><b>Roll No</b></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
          </tr>
        </tbody>
      </table>
      <input type="hidden" name="minRows" id="minRows" value='1'>
      <input type="hidden" id="sizemin" name="sizemin" value='1' />

    </div>
    <input type="submit" data-toggle="tooltip" title="Insert new horizon 
           " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />

     <script>

    function addRow() {
      var table = document.getElementById("mintable");
      var rowCount = parseInt(document.getElementById("minRows").value);
      var rowInsert = parseInt(document.getElementById("sizemin").value);
      var row = table.insertRow(rowInsert + 1);
      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      element1.type = "text";
      element1.id = "rollnoo" + (rowCount);
      element1.className = "form-control";
      element1.oninput = function() {
        this.value = this.value.replace(/[^0-9]/g,'');
      }
      cell1.appendChild(element1);
      rowCount = parseInt(rowCount)+ 1;
      document.getElementById("minRows").value = rowCount;
      document.getElementById("sizemin").value =
        parseInt(document.getElementById("sizemin").value) + 1;
      }
    
  </script>
  </body>
  </html>

how to call java script on new created html table row

1 Answers1