如何在InnerHTML输入框中应用datepicker。现在,日期选择器是工作正常,但增量值不会改变
问题描述:
如何在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 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 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。
答
是的,我这样做。 我用“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 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');
C和r确实发生了变化。变量名不会是日期[0],而是日期[“0”]。删除双引号,它将如预期。 –
请仔细检查,检查 –
对不起......这是正确的。日期[0]等... –