0
他の機能画面を追加した後に行スクリプトを追加できない他の機能画面を追加した後に行を追加すると日付ピッカースクリプトが機能しない
ユーザーが「addrow」ボタンをクリックしたときにテーブルトウを動的に追加しようとしています。それは私が別にそれをするときに機能します。しかし、私は他の機能スクリプトを持っている私のメインJSPコードと一緒に追加すると、その時間は動作しません。これで私を助けてください。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>section</title>
<style>
</style>
<!-- date picker -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
\t $("#datepicker").datepicker();
});
</script>
<!-- addrows functionality -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=1;
$("button").click(function(){
$('#add'+i).html("<td><select name='inpparameter0"+i+"'id='input_parameter'><option value='P1'>Type/Rating</option><option value='P2'>Operating Check</option><option value='P3'>Ext.Apperance</option><option value='P4'>Verify TC</option><option value='P5'>Material</option<option value='P6'>Dimension Check</option><option value='P7'>Threads Check</option> \t \t <option value='P8'>Visual Check</option><option value='P9'>Specification</option><option value='P10'>Batch no</option><option value='P11'>Mfg. Date</option><option value='P12'>Exp. Date</option></select></td><td><select name='inpspec0"+i+"' id='input_spec'><option value='S1'>As per PO</option><option value='S2'>Damage</option><option value='S3'>OK</option><option value='S4'>Stainless Steel</option><option value='S5'>Gaues</option><option value='S6'>Mild Steel</option><option value='S7'>As per Drawing]</option><option value='S8'>Cast Iron</option><optionvalue='S9'>Copper</option><optionvalue='S10'>Aluminium</option><optionvalue='S11'>Brass</option><option value='S12'>Spring Steel</option><option value='S13'>Tool Steel</option></select> \t </td><td class='Body_Cell'><input type='text' name='inpact1"+i+"' id='inpact1' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact2"+i+"' id='inpact2' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact3"+i+"' id='inpact3' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact4"+i+"' id='inpact4' value='NIL'></td><td class='Body_Cell'><input type='text' name='inpact5"+i+"' id='inpact5' value='NIL'></td>");
$('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>');
i++;
});
});
</script>
<script>
<!-- For calling Populate Table Servlet for getting Item list -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
\t $("#tablediv").hide();
$("#showTable").click(function(event){
$.post('PopulateTable',{pono : $('#pono').val()},function(responseJson) {
\t if(responseJson!=null){
\t $("#itemtable").find("tr:gt(0)").remove();
\t var table1 = $("#itemtable");
\t $.each(responseJson, function(key,value) {
\t \t var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
\t \t rowNew.children().eq(0).html('<input type="checkbox"/>');
\t \t \t rowNew.children().eq(1).text(value['itemname']);
\t rowNew.children().eq(2).text(value['itemcode']);
\t rowNew.children().eq(3).text(value['supplier']);
\t rowNew.children().eq(4).text(value['totalqty']);
\t rowNew.children().eq(5).html('<input type="text"/>');
\t rowNew.children().eq(6).html('<input type="text"/>');
\t rowNew.children().eq(7).html('<input type="text"/>');
\t rowNew.appendTo(table1);
\t });
}
});
$("#tablediv").show();
\t });
});
</script>
</script>
<script>
$(document).ready(function() {
\t $("#find").click(function(event){
\t \t $.ajax({
\t \t \t url : 'callserv0',
\t \t \t type: 'POST',
\t \t \t data : {
\t \t \t \t grnno : $('#grn').val()
\t \t \t },
\t \t \t success : function(data) {
\t \t \t \t alert("Please hold on!");
\t \t \t \t var str = data;
\t \t \t var res = str.split(",");
\t \t \t \t $('#pono').val(res[0]);
\t \t \t \t $('#podt').val(res[1]);
\t \t \t \t return false;
\t \t \t }
\t \t });
\t });
});
</script>
<script>
/* function to show dropdown list of print menu*/
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* reload the page when user clicks new button*/
function myfun1() {
location.reload(true);
}
/* to allow only numerical values in GRn field*/
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</head>
<body>
<form>
<img border="0" src="mwlogo.gif" alt="logo" id="topright">
<header><h1>testing</h1></header>
<ul>
<li><a href="javascript:void(0)" onclick="myfun1()">Newreload</a></li>
<li><a href="#help">Helptest</a></li>
<li><a href="logout.html">Logout</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Print</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Print Current Report</a>
<a href="#">Print Preview</a>
<a href="#">Print Report for given date</a>
<a href="#">Print Report for given period</a>
</div>
</li>
</ul>
<p>
Receipt number: <input type="text" id="grn" onkeypress="return isNumber(event)" required/>
<input type="button" id="find" value="Find" class="button0"/>
Type of Evaluation <select name="Evalu">
\t <option value="electrical">Electrical</option>
\t <option value="mechanical">Mechanical</option>
</select>
Unit <select name="unit">
<option value="unit1">xx</option>
<option value="unit2">yy</option>
<option value="unit3">zz</option>
<option value="unit5">rr</option>
</select>
<br>
Report No <input type="text" name="irepno" maxlength="8"/>
Inspection date <input type="date" name="inspdate" id="datepicker" required/>
<br></br>
POod number: <input type="text" id="pono" />
POdt Date : <input type="text" id="podt" />
doc No <input type="text" name="invno"/>
doc Date <input type="text" name="invdate"/>
</p>
<input type="button" value="Show Item List" id="showTable" class="button1"/>
<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
\t <td><input type="checkbox" /></td>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
</table>
</div>
<br></br>
<table cellspacing="0" cellpadding="0" width="100%" id="tab_logic" >
<tr>
\t <th class="Header_Cell" width="91" align="center">Parameters</th>
\t <th class="Header_Cell" width="150" align="center">Specification</th>
\t <th class="Header_Cell" width="150" align="center">Actual1</th>
\t <th class="Header_Cell" width="50" align="center">Actual2</th>
\t <th class="Header_Cell" width="50" align="center">Actual3</th>
\t <th class="Header_Cell" width="50" align="center">Actual4</th>
\t <th class="Header_Cell" width="50" align="center">Actual5</th>
</tr>
<tr id ='add0'>
\t <td>
\t \t <select name="inpparameter0" id="input_parameter">
\t \t <option value="P1">Type/Rating</option>
\t \t <option value="P2">Operating Check</option>
\t \t <option value="P3">Ext.Apperance</option>
\t \t <option value="P4">Verify TC</option>
\t \t <option value="P5">Material</option>
\t \t <option value="P6">Dimension Check</option>
\t \t <option value="P7">Threads Check</option>
\t \t <option value="P8">Visual Check</option>
\t \t <option value="P9">Specification</option>
\t \t <option value="P10">Batch no</option>
\t \t <option value="P11">Mfg. Date</option>
\t \t <option value="P12">Exp. Date</option>
\t \t </select>
\t </td> \t
\t <td>
\t \t <select name="inpspec0" id="input_spec">
\t \t <option value="S1">As per PO</option>
\t \t <option value="S2">Damage</option>
\t \t <option value="S3">OK</option>
\t \t <option value="S4">Stainless Steel</option>
\t \t <option value="S5">Gaues</option>
\t \t <option value="S6">Mild Steel</option>
\t \t <option value="S7">As per Drawing]</option>
\t \t <option value="S8">Cast Iron</option>
\t \t <option value="S9">Copper</option>
\t \t <option value="S10">Aluminium</option>
\t \t <option value="S11">Brass</option>
\t \t <option value="S12">Spring Steel</option>
\t \t <option value="S13">Tool Steel</option>
\t \t </select>
\t </td> \t
\t <td class="Body_Cell"><input type="text" name="inpacta0" id="inpact1" value="NIL"/></td>
\t <td class="Body_Cell"><input type="text" name="inpactb0" id="inpact2" value="NIL"/></td>
\t <td class="Body_Cell"><input type="text" name="inpactc0" id="inpact3" value="NIL"/></td>
\t <td class="Body_Cell"><input type="text" name="inpactd0" id="inpact4" value="NIL"/></td>
\t <td class="Body_Cell"><input type="text" name="inpacte0" id="inpact5" value="NIL"/></td>
</tr>
</table>
<br>
<input type="button" value="Addrow" id="addrow" class="button1" style="float: right;">
<input type="button" value="Save the record" class="button0">
</form>
</body>
</html>
ありがとうございました！ – Jsel
でも、一緒に追加したときに日付ピッカーも機能しませんでした。何が問題になるでしょう – Jsel
@Jsel問題はありません:) – Ayush