如何在jQuery对话框上处理事件。例如，我想在jQuery对话框上处理onchange事件。
任何人都可以建议同样的
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
label, input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 150%;
}
div#users-contain table td, div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
#dialog-form {
display: none;
}
#button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttondisplay {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttonadd {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttondisplay1 {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttonadd1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#first {
border: 2px solid;
top: 500px;
padding: 12px;
background: #F8F9F9;
width: 1200px;
position: absolute;
right: 150px;
}
#firstinfo {
border: 2px solid;
top: 29px;
padding: 12px;
background: #F8F9F9;
width: 1200px;
position: absolute;
right: 150px;
}
#headerlogo {
height: 70px;
background: #0f2d51;
}
#headerlogo1 {
height: 70px;
background: #0f2d51;
}
#centername {
position: absolute;
top: 3px;
padding: 12px;
font-family: verdana;
}
#centername1 {
position: absolute;
font-family: verdana;
top: 3px;
padding: 12px;
right:290px;
}
</style>
</head>
<script type="text/javascript">
var myarr=[];
var finalarr=[];
var infopanelarr=[];
var datagridarray=[];
var switchflag=0;
var datapropertyoptions="";
var entitiyoptions ="";
var projectoptions ="";
var moduleoptions ="";
var datapropertyoptions="";
var projects=[];
var modules=[];
var entity=[];
var projectid=0;
var moduleid=0;
function resetpage() {
location.reload();
loaddetails();
}
function lowercase(value) {
var value = value.replace(/\s+/g, '');
return value.toLowerCase();
}
function upperCamelCase(value) {
var valuearr = value.split(" ");
var val="";
for(var i =0; i < valuearr.length; i++){
val = val + capitalFirstLetter(valuearr[i]);
}
return val;
}
function lowerCamelCase(value) {
var valuearr = value.split(" ");
var val=valuearr[0].toLowerCase();
for(var i =1; i < valuearr.length; i++){
val = val + capitalFirstLetter(valuearr[i]);
}
//alert(val);
return val;
}
function capitalFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function loaddetails(){
// getting projects details from service
$.ajax({
type: "GET",
async:false,
dataType: "json",
url: "http://localhost:8081/GetHelpServices/getProjects",
success: function(data) {
console.log("projects ajax"+JSON.stringify(data));
for(var j=0; j< data.length; j++){
projects.push(data[j]);
projectoptions = projectoptions + "<option>"+data[j].projectName+"</option>";
}
document.getElementById('projects').innerHTML = projectoptions;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+errorThrown);
}
});
// getting modules details from service
$.ajax({
type: "GET",
async:false,
dataType: "json",
url: "http://localhost:8081/GetHelpServices/getModules",
success: function(data) {
console.log("modules ajax"+data.length);
for(var j=0; j< data.length; j++){
modules.push(data[j]);
moduleoptions = moduleoptions + "<option>"+data[j].moduleName+"</option>";
}
document.getElementById('modules').innerHTML = moduleoptions;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+errorThrown);
}
});
entity = ["Employee","Student"];
for(var j=0; j< entity.length; j++){
entitiyoptions = entitiyoptions + "<option>"+entity[j]+"</option>";
}
document.getElementById('entities').innerHTML = entitiyoptions;
/* datapropertyoptions =
"<option >text</option>" +
"<option >number</option>" +
"<option >boolean</option>" +
"<option >date</option>" + entitiyoptions + "";
document.getElementById('dataproperties').innerHTML = datapropertyoptions; */
}
$(document).ready(function(){
$("#generateArtifacts").click(function(){
var cellbl;
var celdpt;
var infocelarr=[];
var infoproject=document.getElementById("mainproject").value;
var infomodule=document.getElementById("mainmodule").value;
var infoentity=document.getElementById("mainentity").value;
for(var k=0; k<modules.length; k++){
console.log("modules "+modules.length);
console.log("modules "+modules[k].moduleName);
console.log("modules "+infomodule);
if(modules[k].moduleName.trim() == infomodule.trim()){
alert(modules[k].moduleId);
alert(infomodule);
moduleid = modules[k].moduleId;
}
}
for(var k=0; k<projects.length; k++){
console.log("projects "+projects.length);
console.log("projects name "+projects[k].projectName);
console.log("projects read name"+infoproject);
if(projects[k].projectName.trim() === infoproject.trim()){
alert(projects[k].projectId);
alert(infoproject);
projectid = projects[k].projectId;
}
}
infoproject = upperCamelCase(infoproject.toLowerCase());
infomodule = lowercase(infomodule.toLowerCase());
infoentity = upperCamelCase(infoentity.toLowerCase());
var dbinfo = {"primaryKey":"Id"};
console.log(projects);
var infopanelobj = {'"projectId"': ""+projectid+"", '"projectName"':infoproject, '"moduleId"': ""+moduleid+"", '"moduleName"':infomodule, '"entityName"':infoentity,'"fields"':myarr,'"dbinfo"':dbinfo};
infopanelarr.push(infopanelobj);
//finalarr.push({infopanel:infopanelarr});
console.log(infopanelarr);
// Posting the data
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: "POST",
async:false,
dataType: "json",
data : JSON.stringify(infopanelobj),
url: "http://localhost:8081/GetHelpServices/insertArtifact",
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+jqXHR);
console.log(' Error in processing! '+textStatus);
console.log(' Error in processing! '+errorThrown);
}
});
});
});
$(document).ready(function(){
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
var fieldname = dlg.find(("#fieldname")),
fieldtype = dlg.find(("#fieldtype")),
fieldtobeassociated = dlg.find(("#fieldtobeassociated")),
association = dlg.find(("#association")),
Mandatory = dlg.find(("#Mandatory")),
Unique = dlg.find(("#Unique"));
type = type || 'Create';
var config = {
autoOpen: true,
height: 600,
width: 500,
modal: true,
buttons: {
"Create an account": save_data,
"Cancel": function () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
if (type === 'Edit') {
config.title = "Edit User";
// _.remove(myarr, {"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()});
console.log(myarr);
get_data();
delete (config.buttons['Create an account']);
config.buttons['Edit account'] = function () {
row.remove();
save_data();
};
}
dlg.dialog(config);
function get_data() {
var _fieldname = $(row.children().get(0)).text();
// _password = $(row.children().get(2)).text();
fieldname.val(_fieldname);
// password.val(_password);
}
function save_data() {
var datatype=fieldtype.find("option:selected").text();
if (datatype == "number" || datatype == "text" || datatype == "date" || datatype == "boolean"){
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()};
}
else {
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text(),
"fieldToBeDisplayedInDropDown":fieldtobeassociated.find("option:selected").text(),
"associationType":association.find("option:selected").text()
};
}
var temp ={"fieldId":fieldname.val()};
var index = _.findIndex(myarr, {"fieldId":fieldname.val()});
console.log(type);
if (index > -1){
myarr.splice(index, 1, ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
else{
myarr.push(ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
console.log(myarr);
}
};
$(document).on('click', 'span.delete', function () {
$(this).closest('tr').find('td').fadeOut(200,
function () {
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$(document).on('click', 'td a.edit', function () {
new_dialog('Edit', $(this).parents('tr'));
return false;
});
$("#create-user").button().click(new_dialog);
});
</script>
<body onload="loaddetails()">
<div class="container" >
<h2>UI Details</h2>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="inputdefault">Project</label>
<input class="form-control" list="projects" id="mainproject" name="project">
<datalist id="projects">
</datalist>
</div>
<div class="col-md-4">
<label for="inputdefault">Module</label>
<input class="form-control" list="modules" id="mainmodule" name="module">
<datalist id="modules">
</datalist>
</div>
<div class="col-md-4">
<label for="inputlg">Entity</label>
<input class="form-control" list="entities" id="mainentity" name="module">
<datalist id="entities">
</datalist>
</div>
</div>
</div>
</form>
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<label for="fieldname">
Field Name*</label>
<input class="form-control " type="text" name="fieldname" id="fieldname" value="" class="text ui-widget-content ui-corner-all" />
<br>
<label for="fieldtype">
Type*</label>
<select class="form-control " id="fieldtype" >
<option value="1">text</option>
<option value="2">boolean</option>
<option value="3">number</option>
<option value="4">date</option>
<option value="4">Student</option>
</select>
<br>
<label for="fieldtobeassociated">
Field to be associated</label>
<select class="form-control " id="fieldtobeassociated" >
<option value="1">name</option>
<option value="2">address</option>
</select>
<br>
<label for="association">
Association Type</label>
<select class="form-control " id="association" >
<option value="1">Foreign Key</option>
<option value="2">One-to-One</option>
<option value="2">One-to-Many</option>
<option value="2">Many-to-One</option>
<option value="2">Many-to-Many</option>
<option value="2">Many-to-Many+Joint Tables</option>
</select>
<br>
<div class="checkbox">
<label><input type="checkbox" value="Mandatory" id="Mandatory">Mandatory</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="Unique" id="Unique">Unique</label>
</div>
</fieldset>
</form>
</div>
<div class="container" >
<div id="users-contain" class="ui-widget">
<h2>Fields</h2>
<button id="create-user">
Add Fields</button>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Field Name </th>
<th>Type</th>
<th> Update</th>
<th> Remove</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<a class="btn btn-success " id="generateArtifacts">Generate Artifacts</a> <a class="btn btn-danger " onclick="resetpage()">Reset Artifacts</a>
</div>
</body>
</html>
在上面的代码中，我想在同一个对话框的div元素上点击onchange事件，在jQuery对话框中隐藏/显示select option。
答案 0 :(得分：0)
根据您的示例，您需要确保只加载jQuery 3.2.1而不是两者。
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
答案 1 :(得分：0)
我刚刚完善了我的答案并在下面发帖。以下代码与我的预期要求正常工作。但是需要一些关于读表outerHTML数据的建议。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<style type="text/css">
</style>
</head>
<script type="text/javascript">
var myarr = [];
var finalarr = [];
var infopanelarr = [];
var datagridarray = [];
var switchflag = 0;
var datapropertyoptions = "";
var entitiyoptions = "";
var projectoptions = "";
var moduleoptions = "";
var datapropertyoptions = "";
var projects = [];
var modules = [];
var entity = [];
var projectid = 0;
var moduleid = 0;
var flag=true;
function resetpage() {
location.reload();
loaddetails();
}
function lowercase(value) {
var value = value.replace(/\s+/g, '');
return value.toLowerCase();
}
function upperCamelCase(value) {
var valuearr = value.split(" ");
var val = "";
for (var i = 0; i < valuearr.length; i++) {
val = val + capitalFirstLetter(valuearr[i]);
}
return val;
}
function lowerCamelCase(value) {
var valuearr = value.split(" ");
var val = valuearr[0].toLowerCase();
for (var i = 1; i < valuearr.length; i++) {
val = val + capitalFirstLetter(valuearr[i]);
}
//alert(val);
return val;
}
function capitalFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function loaddetails(){
}
function isPrimitive(datatype){
if (datatype == "text" || datatype == "number" || datatype == "date" || datatype == "boolean"){
flag = true;
}
else {
flag=false;
}
return flag;
}
function onFieldTypeChange(){
var entityoptions = "";
var element = document.getElementById("fieldtype").value;
if (isPrimitive(element)){
//alert('hi');
entityoptions = "<option>id</option><option>name</option><option>address</option>";
$('#entityProperties').hide();
}
else {
entityoptions = "<option value='111'>Student</option><option value='112'>Employee</option><option value='113'>Address</option>";
$('#entityProperties').show();
}
document.getElementById("fieldtobeassociated").innerHTML = entityoptions;
}
function insert_save_row(){
var fieldname=document.getElementById("fieldname").value;
var fieldtype=document.getElementById("fieldtype").value;
var table=document.getElementById("fields");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr class='item' id='row"+table_len+"'><td class='theCell' id='fieldname"+table_len+"'>"+fieldname+"</td><td class='theCell' id='fieldtype"+table_len+"'>"+fieldtype+"</td><td><input type='button' class='btn btn-success' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'></td><td> <input type='button' class='btn btn-danger' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("save").style.display="block";
document.getElementById("edit").style.display="none";
//alert(fieldtype);
if (isPrimitive(fieldtype))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('hide');
}
function edit_row(no)
{
var name=document.getElementById("fieldname"+no);
var type=document.getElementById("fieldtype"+no);
var vname = name.innerHTML;
var vtype = type.innerHTML;
document.getElementById("temp_row_no").value = no;
document.getElementById("fieldname").value = vname;
document.getElementById("fieldtype").value = vtype;
document.getElementById("save").style.display="none";
document.getElementById("edit").style.display="block";
if (isPrimitive(vtype.trim()))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('show');
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function edit_save_row()
{
var no = document.getElementById("temp_row_no").value;
var name=document.getElementById("fieldname").value;
var type=document.getElementById("fieldtype").value;
document.getElementById("fieldname"+no).innerHTML=name;
document.getElementById("fieldtype"+no).innerHTML=type;
if (isPrimitive(type))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('hide');
}
function addField(){
document.getElementById("save").style.display="block";
document.getElementById("edit").style.display="none";
document.getElementById("fieldname").value = "";
document.getElementById("fieldtype").value ="";
$('#entityProperties').hide();
$('#myModal').modal('show');
}
$(document).ready(function(){
var cellbl, celdpt, infocelarr=[];
$("#generateArtifacts").click(function(){
var x = document.getElementById("fields").rows.length;
alert(document.getElementById("fields").tBodies.item(0).innerHTML);
var table = document.getElementById("fields");
for (var i = 3, cell; cell = table.cells[i]; i++) {
alert(i+"--"+cell);
}
var projectid = document.getElementById("mainproject").value
var infoproject=document.getElementById("mainproject").text;
var infomodule=document.getElementById("mainmodule").value;
var infoentity=document.getElementById("mainentity").value;
/* infoproject = upperCamelCase(infoproject.toLowerCase());
infomodule = lowercase(infomodule.toLowerCase());
infoentity = upperCamelCase(infoentity.toLowerCase()); */
var dbinfo = {"primaryKey":"Id"};
var infopanelobj = {'"projectId"': ""+projectid+"", '"projectName"':infoproject, '"moduleId"': ""+moduleid+"", '"moduleName"':infomodule, '"entityName"':infoentity,'"fields"':infocelarr,'"dbinfo"':dbinfo};
console.log(infopanelobj);
});
});
</script>
<body >
<div class="container">
<h2>UI Details</h2>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="inputdefault">Project</label>
<input class="form-control" list="projects" id="mainproject" name="project">
<datalist id="projects"> <option value="Chrome"></option></datalist>
</div>
<div class="col-md-4">
<label for="inputdefault">Module</label>
<input class="form-control" list="modules" id="mainmodule" name="module">
<datalist id="modules"><option value="Chrome"></option></datalist>
</div>
<div class="col-md-4">
<label for="inputlg">Entity</label> <input class="form-control"
list="entities" id="mainentity" name="module">
<datalist id="entities"><option value="Chrome"></option> </datalist>
</div>
</div>
</div>
</form>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Field Details</h4>
</div>
<div class="modal-body">
<label for="fieldname"> Field Name*</label> <input
class="form-control " type="text" name="fieldname" id="fieldname"
value="" class="text ui-widget-content ui-corner-all" /> <br>
<label for="fieldtype2"> Type*</label>
<input class="form-control" list="fieldtypelist" id="fieldtype" onchange="onFieldTypeChange()">
<datalist id="fieldtypelist"><option >text</option><option >number</option><option >date</option></datalist>
<div id="entityProperties">
<br/><label for="fieldtobeassociated"> Field to be
associated</label> <select class="form-control " id="fieldtobeassociated">
</select> <br> <label for="association"> Association Type</label> <select
class="form-control " id="association">
<option value="1">Foreign Key</option>
<option value="2">One-to-One</option>
<option value="2">One-to-Many</option>
<option value="2">Many-to-One</option>
<option value="2">Many-to-Many</option>
<option value="2">Many-to-Many+Joint Tables</option>
</select> <br>
<div class="checkbox">
<label><input type="checkbox" value="Mandatory"
id="Mandatory">Mandatory</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="Unique" id="Unique">Unique</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="save" class="btn btn-primary pull-right" onclick="insert_save_row()">Save</button>
<button type="button" id="edit" class="btn btn-primary pull-right" onclick="edit_save_row()" style="display:none">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Fields</h2>
<a href="#myModal" class="btn btn-lg btn-primary" onclick="addField()">Launch
Demo Modal</a>
<br/><br/><br/>
<table id="fields" class="table table-striped"">
<thead class="thead-default">
<tr >
<th>Field Name</th>
<th>Type</th>
<th>Update</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr id="rows">
</tr>
</tbody>
</table>
<br/><br/><br/>
<a class="btn btn-lg btn-primary" " id="generateArtifacts">Generate
Artifacts</a> <a class="btn btn-lg btn-primary" onclick="resetpage()">Reset
Artifacts</a>
<input id="temp_row_no" style="display:none"></input>
</div>
</body>
</html>
我在javascript中向table outerHMTL添加数据。如何阅读其表格内容。请建议。
答案 2 :(得分：-1)
我以不同的方式修改了我的代码。最初我的问题是我无法在同一个jquery ui对话框中第一次下拉的第二次下拉onchange事件中填充数据。我使用了jquery ui dialog的clone（）方法。不知怎的，它确实起作用了。但在清理代码并添加不同版本的jquery之后，能够在现有对话框的顶部生成另一个对话框，并能够正确设置数据。
var nestedfiled="";
var nestedassociation="";
var flag=true;
$(document).ready(function(){
$( "#dialog-form1" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Submit": function(){
var ftb = $( "#dialog-form1");
var kk= ftb.find("#fieldtobeassociated");
var bb= ftb.find("#association");
nestedfiled = kk.find("option:selected").text();
nestedassociation = bb.find("option:selected").text();
flag=false;
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog('close');
}
}
});
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
nestedfiled = "" ;
nestedassociation = "";
var fieldname = dlg.find(("#fieldname")),
fieldtype = dlg.find(("#fieldtype")),
fieldtobeassociated = dlg.find(("#fieldtobeassociated")),
association = dlg.find(("#association")),
Mandatory = dlg.find(("#Mandatory")),
Unique = dlg.find(("#Unique"));
type = type || 'Create';
var config = {
autoOpen: true,
height: 600,
width: 500,
modal: true,
buttons: {
"Create an account": save_data,
"Cancel": function () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
if (type === 'Edit') {
config.title = "Edit User";
// _.remove(myarr, {"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()});
console.log(myarr);
get_data();
delete (config.buttons['Create an account']);
config.buttons['Edit account'] = function () {
row.remove();
save_data();
};
}
dlg.dialog(config);
function get_data() {
var _fieldname = $(row.children().get(0)).text();
// _password = $(row.children().get(2)).text();
fieldname.val(_fieldname);
// password.val(_password);
}
function save_data() {
var datatype=fieldtype.find("option:selected").text();
if (datatype == "number" || datatype == "text" || datatype == "date" || datatype == "boolean") {
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()};
var temp ={"fieldId":fieldname.val()};
var index = _.findIndex(myarr, {"fieldId":fieldname.val()});
console.log(type);
if (index > -1){
myarr.splice(index, 1, ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
else{
myarr.push(ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
}
else {
flag=true;
$( "#dialog-form1").find(("#fieldtobeassociated")).empty();
$( "#dialog-form1").find(("#fieldtobeassociated")).append("<option>12</option><option>13</option>");
/* .data('param_1', 'whateverdata') */
if(nestedfiled == "" && nestedassociation == "")
$( "#dialog-form1").dialog("open");
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text(),
"fieldToBeDisplayedInDropDown":nestedfiled,
"associationType":nestedassociation
};
var index = _.findIndex(myarr, {"fieldId":fieldname.val()});
console.log(type);
if (index > -1){
myarr.splice(index, 1, ob);
if(nestedfiled !== "" && nestedassociation !== "")
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
else{
myarr.push(ob);
if(nestedfiled !== "" && nestedassociation !== "")
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
//dlg.dialog("close");
}
}
console.log(myarr);
}
};
$(document).on('click', 'span.delete', function () {
$(this).closest('tr').find('td').fadeOut(200,
function () {
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$(document).on('click', 'td a.edit', function () {
new_dialog('Edit', $(this).parents('tr'));
return false;
});
$("#create-user").button().click(new_dialog);
});
</script>
<body onload="loaddetails()">
<div class="container" >
<h2>UI Details</h2>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="inputdefault">Project</label>
<input class="form-control" list="projects" id="mainproject" name="project">
<datalist id="projects">
</datalist>
</div>
<div class="col-md-4">
<label for="inputdefault">Module</label>
<input class="form-control" list="modules" id="mainmodule" name="module">
<datalist id="modules">
</datalist>
</div>
<div class="col-md-4">
<label for="inputlg">Entity</label>
<input class="form-control" list="entities" id="mainentity" name="module">
<datalist id="entities">
</datalist>
</div>
</div>
</div>
</form>
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<label for="fieldname">
Field Name*</label>
<input class="form-control " type="text" name="fieldname" id="fieldname" value="" class="text ui-widget-content ui-corner-all" />
<br>
<label for="fieldtype2">
Type*</label>
<select class="form-control " id="fieldtype" >
<option value="1">text</option>
<option value="2">boolean</option>
<option value="3">number</option>
<option value="4">date</option>
<option value="4">Student</option>
<option value="4">Employee</option>
</select>
</fieldset>
</form>
</div>
<div id="dialog-form1" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<br>
<label for="fieldtobeassociated">
Field to be associated</label>
<select class="form-control " id="fieldtobeassociated" >
</select>
<br>
<label for="association">
Association Type</label>
<select class="form-control " id="association" >
<option value="1">Foreign Key</option>
<option value="2">One-to-One</option>
<option value="2">One-to-Many</option>
<option value="2">Many-to-One</option>
<option value="2">Many-to-Many</option>
<option value="2">Many-to-Many+Joint Tables</option>
</select>
<br>
<div class="checkbox">
<label><input type="checkbox" value="Mandatory" id="Mandatory">Mandatory</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="Unique" id="Unique">Unique</label>
</div>
</fieldset>
</form>
</div>
<div class="container" >
<div id="users-contain" class="ui-widget">
<h2>Fields</h2>
<button id="create-user">
Add Fields</button>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Field Name </th>
<th>Type</th>
<th> Update</th>
<th> Remove</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<a class="btn btn-success " id="generateArtifacts">Generate Artifacts</a> <a class="btn btn-danger " onclick="resetpage()">Reset Artifacts</a>
</div>
</body>
</html>
感谢您的建议。