2017-02-24 2 views
0

Hinzufügen von Zeilenskript funktioniert nicht, nachdem andere Funktionen hinzugefügt wurden.Zeile hinzufügen, Datumssammlerskript funktioniert nach dem Hinzufügen eines anderen Funktionsbildschirms nicht

Ich versuche zu tun, dynamisch hinzuzufügen, wenn der Benutzer auf die Schaltfläche "Addrow" klickt. Es funktioniert, wenn ich es separat mache. Aber wenn ich zusammen mit meinem Hauptjsp-Code hinzufüge, der anderes Funktionsskript hat, funktioniert dieses Mal nicht. Bitte helfen Sie mir dabei.

<%@ 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>

Antwort

0

Sie haben nicht die ID der Schaltfläche, während Sie den Klick-Ereignis-Listener verwendet. Sie haben die Klasse "Button" verwendet. Verwenden Sie die 'addrow' ID der Schaltfläche, um das Ereignis auszulösen. Verwenden Sie auch .on zum Auslösen von Klickereignissen, da .click nicht funktioniert, wenn DOM manipuliert wird. Verschieben Sie die $('#tab_logic').append über $("#addrow").on('click',function(){, denn beim ersten Klick gibt es keine <tr> zum Anhängen der Zeile.

$(document).ready(function(){ 
    var i=1;  
    $("#addrow").on('click',function(){ 
      $('#tab_logic').append('<tr id="add'+(i+1)+'"></tr>'); 
      $('#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>  <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> </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>"); 
      i++; 
     }); 

}); 

Ich hoffe, es hilft. :)

+0

Vielen Dank für Ihre schnelle Hilfe! – Jsel

+0

aber date picker funktioniert auch nicht, wenn ich zusammen mit !! Was wäre das Problem – Jsel

+0

@Jsel Kein Problem :) :) – Ayush

Verwandte Themen