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

时间:2018-06-18 03:45:10

标签: javascript html html-table

我有一个表,其中输入控件调用java脚本事件     oninput =" THIS.VALUE = this.value.replace(/ [^ 0-9] /克,'&#39);

通过单击“添加行”,将插入新行,但我也想在新行上调用此事件。除了积极的整数之外,此事件将停止 使用以下代码。



<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;