1. 首页
  2. 问答
  3. 如何在InnerHTML输入框中应用datepicker。现在，日期选择器是工作正常，但增量值不会改变

如何在InnerHTML输入框中应用datepicker。现在，日期选择器是工作正常，但增量值不会改变

2017-10-09 50 views
0

如何在InnerHTML输入框中应用datepicker。现在，日期选择器是工作正常，但增量值不会改变

<html> 
 
    <head> 
 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script type="text/javascript" language="javascript"> 
 

 
    function addrow() 
 
    { 
 
     var node = document.getElementsByTagName('input'); 
 
     var r = 3; 
 
     var c = 0; 
 
    //alert(node.length); 
 
     for(var i=0; i<node.length; i++) 
 
     { 
 
      //alert(node.length); 
 
      var nod = node[i]; 
 
      if(nod.getAttribute('class') == 'newrow') 
 
      { 
 
       r++; 
 
       c++; 
 
      } 
 
     } 
 

 
     var table= document.getElementById('newtable'); 
 
      var row= table.insertRow(r); 
 
      var cell1 =row.insertCell(0); 
 
      var cell2 =row.insertCell(1); 
 
      var cell3 =row.insertCell(2); 
 
      var cell4 =row.insertCell(3); 
 
      var cell5 =row.insertCell(4); 
 
      var cell6 =row.insertCell(5); 
 
      
 
      cell1.innerHTML ="<input type='text' style='width:98%;height:30px;' class='newrow' placeholder='date' id='date"+c+"' name='date["+c+"]' autocomplete='OFF'/>"; 
 
    \t  
 
      cell2.innerHTML ="<input type='text' style='width:98%;height:30px;' id='time"+c+"' name='time["+c+"]' class='input-block-level time' placeholder='time' autocomplete='OFF'/>"; 
 
    \t  
 
      cell3.innerHTML ="<input type='text' style='width:98%;height:30px;' id='temerature"+c+"' name='temerature["+c+"]' class='input-block-level' placeholder=' temperature' autocomplete='OFF'/>"; 
 
    \t  
 
      cell4.innerHTML ="<input type='text' style='width:98%;height:30px;' id='rlt_humidity"+c+"' name='rlt_humidity["+c+"]' class='input-block-level' placeholder='relative humidity' autocomplete='OFF'/>"; 
 
    \t  
 
      cell5.innerHTML ="<input type='text' style='width:98%;height:30px;' id='diff_pressure"+c+"' name='diff_pressure["+c+"]' class='input-block-level' placeholder='diff pressure' autocomplete='OFF'/>"; 
 
     
 
      cell6.innerHTML ="<li onclick='addrow()' class='icon-plus-sign' ></li><li onclick='DeleteRow()' class='icon-remove-sign' ></li> "; 
 
    } 
 

 
     
 
    \t function DeleteRow(){ 
 

 
    var node_list = document.getElementsByTagName('input'); 
 
    var r=2; 
 
     
 
    \t for (var i=0; i<node_list.length; i++) { 
 
     \t var node = node_list[i]; 
 
      \t if (node.getAttribute('class') == 'newrow') { 
 
       r++; 
 
      \t } 
 
     \t } 
 
    \t document.getElementById("newtable").deleteRow(r); 
 
    } 
 
    </script> 
 
    </head> 
 
    <body onload="addrow()"> 
 
    <div style="border:1px solid black; width:80%; margin-left:auto; margin-right:auto;" class="col-md-12"> 
 
    <form method="post" action="#"> 
 

 
    \t <div class="col-md-12"> 
 

 
           <div style="font-weight: bolder;margin-bottom: 10px;font-size: 18px;"><center>ENVIRONMENT CONTROL OF PACKING AREA</center> </div> 
 
           <!--<div style="font-weight: bolder;font-size:15px;margin-left: 30px;" >Date:</div>--> 
 
           <div style="margin-top: 10px;margin-bottom: 80px;"> 
 
             <table id="newtable" class="table table-bordered"> 
 
              <thead > 
 
              <tr> 
 
               <th rowspan="3" style="vertical-align:top"><center>Date</center></th> 
 
               <th rowspan="3" style="vertical-align:top"><center>Time</center></th> 
 
               <th colspan="3"><center>Parameter</center></th> 
 
               <th rowspan="3"></th> 
 
               </tr> 
 
               <tr> 
 
               <th>Temperature</th> 
 
               <th>Relative Humidity</th> 
 
               <th>Differential pressure</th> 
 
               </tr> 
 
               <tr> 
 
               <th style="width:149px;">≤ 30 ºc</th> 
 
               <th style="width:158px;" >≤ 50 %</th> 
 
               <th style="width:150px;">0.2 to 0.8 mm</th> 
 
               </tr> 
 

 
              </thead> 
 

 
             </table> 
 
           </div> 
 
    \t \t \t \t \t \t \t \t      <button type="submit" name="submit" class="btn btn-info" style="margin-left:520px;">Submit</button> 
 

 
       <div style="margin-top: 80px;margin-bottom: 100px;"> 
 
        <table class="table table-bordered"> 
 
         <thead> 
 
         <tr> 
 
          <th>Production Chemist Sign &date</th> 
 
          <th>QA Chemist&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Sign &date</th> 
 
         </tr> 
 
         </thead> 
 
         <tbody> 
 
         <tr> 
 
          <td style="height: 100px;"></td> 
 
          <td style="height: 100px;"></td> 
 
         </tr> 
 
         </tbody> 
 
       </table> 
 
      </div> 
 

 

 

 
    \t </div> 
 

 

 
    \t \t </div> 
 
    \t \t <link rel="stylesheet" href="//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> 
 
     
 
    \t \t </form> 
 
    \t \t </body> 
 
    </html>

<html> 
 
<head> 
 
<link href="//code.jquery.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script type="text/javascript" language="javascript"> 
 

 
function datepick(c) { 
 
    alert(c); 
 
    $("#date"+c).datepicker({dateFormat:'dd-mm-yy'}); 
 
    } 
 

 
function addrow() 
 
{ 
 
    var node = document.getElementsByTagName('input'); 
 
    var r = 3; 
 
    var c = 0; 
 
//alert(node.length); 
 
    for(var i=0; i<node.length; i++) 
 
    { 
 
     //alert(node.length); 
 
     var nod = node[i]; 
 
     if(nod.getAttribute('class') == 'newrow') 
 
     { 
 
      r++; 
 
      c++; 
 
     } 
 
    } 
 

 
    var table= document.getElementById('newtable'); 
 
     var row= table.insertRow(r); 
 
     var cell1 =row.insertCell(0); 
 
     var cell2 =row.insertCell(1); 
 
     var cell3 =row.insertCell(2); 
 
     var cell4 =row.insertCell(3); 
 
     var cell5 =row.insertCell(4); 
 
     var cell6 =row.insertCell(5); 
 
     
 
     cell1.innerHTML ="<input type='text' style='width:98%;height:30px;' class='newrow' placeholder='date' id='date"+c+"' name='date["+c+"]' autocomplete='OFF' onClick='datepick("+c+")'/>"; 
 
\t  
 
     cell2.innerHTML ="<input type='text' style='width:98%;height:30px;' id='time"+c+"' name='time["+c+"]' class='input-block-level time' placeholder='time' autocomplete='OFF'/>"; 
 
\t  
 
     cell3.innerHTML ="<input type='text' style='width:98%;height:30px;' id='temerature"+c+"' name='temerature["+c+"]' class='input-block-level' placeholder=' temperature' autocomplete='OFF'/>"; 
 
\t  
 
     cell4.innerHTML ="<input type='text' style='width:98%;height:30px;' id='rlt_humidity"+c+"' name='rlt_humidity["+c+"]' class='input-block-level' placeholder='relative humidity' autocomplete='OFF'/>"; 
 
\t  
 
     cell5.innerHTML ="<input type='text' style='width:98%;height:30px;' id='diff_pressure"+c+"' name='diff_pressure["+c+"]' class='input-block-level' placeholder='diff pressure' autocomplete='OFF'/>"; 
 
    
 
     cell6.innerHTML ="<li onclick='addrow()' class='icon-plus-sign' ></li><li onclick='DeleteRow()' class='icon-remove-sign' ></li> "; 
 
} 
 

 
    
 
\t function DeleteRow(){ 
 

 
var node_list = document.getElementsByTagName('input'); 
 
var r=2; 
 
    
 
\t for (var i=0; i<node_list.length; i++) { 
 
    \t var node = node_list[i]; 
 
     \t if (node.getAttribute('class') == 'newrow') { 
 
      r++; 
 
     \t } 
 
    \t } 
 
\t document.getElementById("newtable").deleteRow(r); 
 
} 
 
</script> 
 
</head> 
 
<body onload="addrow()"> 
 
<div style="border:1px solid black; width:80%; margin-left:auto; margin-right:auto;" class="col-md-12"> 
 
<form method="post" action="#"> 
 

 
\t <div class="col-md-12"> 
 

 
          <div style="font-weight: bolder;margin-bottom: 10px;font-size: 18px;"><center>ENVIRONMENT CONTROL OF PACKING AREA</center> </div> 
 
          <!--<div style="font-weight: bolder;font-size:15px;margin-left: 30px;" >Date:</div>--> 
 
          <div style="margin-top: 10px;margin-bottom: 80px;"> 
 
            <table id="newtable" class="table table-bordered"> 
 
             <thead > 
 
             <tr> 
 
              <th rowspan="3" style="vertical-align:top"><center>Date</center></th> 
 
              <th rowspan="3" style="vertical-align:top"><center>Time</center></th> 
 
              <th colspan="3"><center>Parameter</center></th> 
 
              <th rowspan="3"></th> 
 
              </tr> 
 
              <tr> 
 
              <th>Temperature</th> 
 
              <th>Relative Humidity</th> 
 
              <th>Differential pressure</th> 
 
              </tr> 
 
              <tr> 
 
              <th style="width:149px;">≤ 30 ºc</th> 
 
              <th style="width:158px;" >≤ 50 %</th> 
 
              <th style="width:150px;">0.2 to 0.8 mm</th> 
 
              </tr> 
 

 
             </thead> 
 

 
            </table> 
 
          </div> 
 
\t \t \t \t \t \t \t \t      <button type="submit" name="submit" class="btn btn-info" style="margin-left:520px;">Submit</button> 
 

 
      <div style="margin-top: 80px;margin-bottom: 100px;"> 
 
       <table class="table table-bordered"> 
 
        <thead> 
 
        <tr> 
 
         <th>Production Chemist Sign &date</th> 
 
         <th>QA Chemist&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Sign &date</th> 
 
        </tr> 
 
        </thead> 
 
        <tbody> 
 
        <tr> 
 
         <td style="height: 100px;"></td> 
 
         <td style="height: 100px;"></td> 
 
        </tr> 
 
        </tbody> 
 
      </table> 
 
     </div> 
 

 

 

 
\t </div> 
 

 

 
\t \t </div> 
 
\t \t <link rel="stylesheet" href="//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> 
 
    
 
\t \t </form> 
 
\t \t </body> 
 
</html>

下面是摘录有一个动态记录在其中添加和删除功能，但到时我会添加日期选择功能。 datepicker工作正常，但c和r变量的值不是增量。如果我删除datepicker函数名称具有datepick循环将正常工作，并且c和r变量的值也会发生变化。所以请任何人帮助我正确地工作。 我想在日期栏日期选择器，改变各行输入框的ID和名称将由1，递增如第一行输入框具有名称是日期[0]和ID是DATE0点击加号第二行之后将被添加和名输入框的是日期[1]和ID是DATE1。

请检查这两个代码段。

通缉输出是添加在最后位置的新行，并且在日期字段的每个输入框中都应该是datepicker。

来源

2017-10-09 Kunal Waghmare

+0

C和r确实发生了变化。变量名不会是日期[0]，而是日期[“0”]。删除双引号，它将如预期。 –

+0

请仔细检查，检查 –

+0

对不起......这是正确的。日期[0]等... –

回答

0

是的，我这样做。 我用“newrow”类在第一个td中使用了span标记，现在它工作正常。

<html> 
 
<head> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" /> 
 
<script type="text/javascript" language="javascript"> 
 

 
function addrow() 
 
{ 
 
    var node = document.getElementsByTagName('span'); 
 
    var r = 3; 
 
    var c = 0; 
 
//alert(node.length); 
 
    for(var i=0; i<node.length; i++) 
 
    { 
 
     //alert(node.length); 
 
     var nod = node[i]; 
 
     if(nod.getAttribute('class') == 'newrow') 
 
     { 
 
      r++; 
 
      c++; 
 
     } 
 
    } 
 

 
    var table= document.getElementById('newtable'); 
 
     var row= table.insertRow(r); 
 
     var cell1 =row.insertCell(0); 
 
     var cell2 =row.insertCell(1); 
 
     var cell3 =row.insertCell(2); 
 
     var cell4 =row.insertCell(3); 
 
     var cell5 =row.insertCell(4); 
 
     var cell6 =row.insertCell(5); 
 
     
 
     cell1.innerHTML ="<span class='newrow'></span><input type='text' style='width:98%;height:30px;' class='datepicker' placeholder='date' id='date"+c+"' name='date["+c+"]' autocomplete='OFF' />"; 
 
\t  
 
     cell2.innerHTML ="<input type='text' style='width:98%;height:30px;' id='time"+c+"' name='time["+c+"]' class='input-block-level time' placeholder='time' autocomplete='OFF'/>"; 
 
\t  
 
     cell3.innerHTML ="<input type='text' style='width:98%;height:30px;' id='temerature"+c+"' name='temerature["+c+"]' class='input-block-level' placeholder=' temperature' autocomplete='OFF'/>"; 
 
\t  
 
     cell4.innerHTML ="<input type='text' style='width:98%;height:30px;' id='rlt_humidity"+c+"' name='rlt_humidity["+c+"]' class='input-block-level' placeholder='relative humidity' autocomplete='OFF'/>"; 
 
\t  
 
     cell5.innerHTML ="<input type='text' style='width:98%;height:30px;' id='diff_pressure"+c+"' name='diff_pressure["+c+"]' class='input-block-level' placeholder='diff pressure' autocomplete='OFF'/>"; 
 
    
 
     cell6.innerHTML ="<li onclick='addrow()' class='icon-plus-sign' ></li><li onclick='DeleteRow()' class='icon-remove-sign' ></li> "; 
 
    
 
    $(document).ready(function() { 
 
     $(".datepicker").datepicker({ 
 
      dateFormat: 'dd-mm-yy', 
 
      maxDate: '0', 
 
      onClose: function() { 
 
      $(this).focus(); 
 
      } 
 
     }); 
 
    }); 
 
    } 
 

 
    
 
\t function DeleteRow(){ 
 

 
var node_list = document.getElementsByTagName('span'); 
 
var r=2; 
 
    
 
\t for (var i=0; i<node_list.length; i++) { 
 
    \t var node = node_list[i]; 
 
     \t if (node.getAttribute('class') == 'newrow') { 
 
      r++; 
 
     \t } 
 
    \t } 
 
\t document.getElementById("newtable").deleteRow(r); 
 
} 
 
</script> 
 
</head> 
 
<body onload="addrow()"> 
 
<div style="border:1px solid black; width:100%; margin-left:auto; margin-right:auto;" class="col-md-12"> 
 
<form method="post" action="#"> 
 

 
\t <div class="col-md-12"> 
 

 
          <div style="font-weight: bolder;margin-bottom: 10px;font-size: 18px;"><center>ENVIRONMENT CONTROL OF PACKING AREA</center> </div> 
 
          <!--<div style="font-weight: bolder;font-size:15px;margin-left: 30px;" >Date:</div>--> 
 
          <div style="margin-top: 10px;margin-bottom: 80px;"> 
 
            <table id="newtable" class="table table-bordered"> 
 
             <thead > 
 
             <tr> 
 
              <th rowspan="3" style="vertical-align:top"><center>Date</center></th> 
 
              <th rowspan="3" style="vertical-align:top"><center>Time</center></th> 
 
              <th colspan="3"><center>Parameter</center></th> 
 
              <th rowspan="3"></th> 
 
              </tr> 
 
              <tr> 
 
              <th>Temperature</th> 
 
              <th>Relative Humidity</th> 
 
              <th>Differential pressure</th> 
 
              </tr> 
 
              <tr> 
 
              <th style="width:149px;">≤ 30 ºc</th> 
 
              <th style="width:158px;" >≤ 50 %</th> 
 
              <th style="width:150px;">0.2 to 0.8 mm</th> 
 
              </tr> 
 

 
             </thead> 
 

 
            </table> 
 
          </div> 
 
\t \t \t \t \t \t \t \t      <button type="submit" name="submit" class="btn btn-info" style="margin-left:520px;">Submit</button> 
 

 
      <div style="margin-top: 80px;margin-bottom: 100px;"> 
 
       <table class="table table-bordered"> 
 
        <thead> 
 
        <tr> 
 
         <th>Production Chemist Sign &date</th> 
 
         <th>QA Chemist&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Sign &date</th> 
 
        </tr> 
 
        </thead> 
 
        <tbody> 
 
        <tr> 
 
         <td style="height: 100px;"></td> 
 
         <td style="height: 100px;"></td> 
 
        </tr> 
 
        </tbody> 
 
      </table> 
 
     </div> 
 

 

 

 
\t </div> 
 

 

 
\t \t </div> 
 
\t \t <link rel="stylesheet" href="//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> 
 
    
 
\t \t </form> 
 
\t \t </body> 
 
</html>

变化document.getElementsByTagName（ '输入'）; document.getElementsByTagName（'span'）;

来源

2017-10-10 07:00:52

相关问题

 相关问题