我正在尝试捕获并将对话框窗口中的数据显示到父页面上的表中。部分问题是,我有许多对话框,所有对话框都需要捕获和显示不同的数据。每个对话框的数据需要显示在特定于该对话框的父页面表中。合理?因此,例如,用户单击父页面中的“医疗”选项,“医疗”对话框打开,用户在对话框中输入数据,按“确定”。将一行添加到prod-price-list表中,并附带相应的信息:1。打开的对话框的标题,在本例中为MEDICAL,2。从下拉列表中选择的是什么选项,3。溢价和4.免赔额。
所以这是对话框窗口的代码
$(document).ready(function() {
var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">');
$('#prod-list td a').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
var $cnt = $(this).attr('href') + " #" + $(this).attr('id')
$dialog
.load($cnt)
.dialog({
title: $link.attr('title'),
width: 300,
height: 205,
modal: true,
buttons: {
'Ok': function() {
//$('#prod-price-list').hide();
if ($("#prod-price-list tbody").length > 0){
$("<tr><td>1</td><td>a</td></tr>").appendTo("#prod-price-list tbody");
}
else{
$("<tbody><tr><td>1</td><td>a</td></tr></tbody>").appendTo("#prod-price-list");
}
$( this ).dialog( "close" );
}
},
'Cancel': function() {
$( this ).dialog( "close" );
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
以下是对话框代码:
<div id="medical1">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><label>Coverage Level</label></td>
<td>
<select name="coverlevel" id="coverlevel">
<option value="0" selected>Employee Only</option>
<option value="1">Employee + Spouse</option>
<option value="2">Employee + Children</option>
<option value="3">Employee + Family</option>
</select>
</td>
</tr>
<tr>
<td><label>Premium</label></td>
<td><input name="premium" id="medicalprem" type="text" size="30" maxlength="30" class="form-field-box"/></td>
</tr>
</table>
<!-- <input id="btnAddToList" name="addTolist" value="Add To List" type="button" />
-->
</div>
这是表格HTML:
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="prod-price-list">
<tbody>
<tr id="t1">
<td class="prod-title">Medical</td>
<td class="chart-totals"> </td>
</tr>
<tr id="t2">
<td class="prod-title">Critical Illness 2</td>
<td class="chart-totals"> </td>
</tr>
<tr id="t3">
<td class="prod-title">Cancer 2</td>
<td class="chart-totals"> </td>
</tr>
<tr id="t4">
<td class="prod-title">Accident 1</td>
<td class="chart-totals"> </td>
</tr>
<tr id="t5">
<td class="prod-title">Deductible</td>
<td class="chart-totals"> </td>
</tr>
<tr>
<td colspan="2"><div class="horz-border"></div></td>
</tr>
</tbody>
<tr>
<td class="chart-Gtotal">TOTAL</td>
<td class="Gtotal">$1510.00</td>
</tr>
<tr>
<td colspan="2">
<div class="horz-border"></div>
<center>
<a href="#"><input type="image" id="chart1-select" src="css/img/select-btn.png"/></a>
</center>
</td>
</tr>
</table>