时间戳

首页 > 解决方案 > 如何在新创建的 html 表行上调用 java 脚本

javascript - 如何在新创建的 html 表行上调用 java 脚本

问题描述

我有一个表，其中输入控件调用 java 脚本事件 oninput="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";
      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>

标签： javascripthtmlhtml-table

解决方案

尝试使用以下语法将事件处理程序添加到新创建的元素：

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>

推荐阅读