次のコードを記述して、テーブルを動的に作成します。このテーブルはサーバーに送信され、電子メールで渡されます。ただし、ユーザーが投稿していないデータを投稿すると、ドロップダウンフィールドの項目のいずれかが表示されます。私はたくさんの調査をしました、そしてそれはDOMに関係していると思います、しかし私はそれを修正する方法がわかりません。
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var row_counter = 1
var sandwichOptions = { '' : 'None',
'item1' : 'Item1',
'item2' : 'Item2',
'item3' : 'Item3',
'item4' : 'Item4'
};
function createTable(tbody, rows, cols) {
if (tbody == null || tbody.length < 1) return;
if ($('#body') != null) {$('#body').empty()};
for (var r = 1; r <= rows; r++) {
var trow = $("<tr>");
var sandwich = $('#sandwiches').clone();
sandwich.name = "sandwich"+r;
// var sandwich = $('<select></select>');
// //sandwich.attr("id","sandwich"+r);
// sandwich.name = "sandwich"+r;
// sandwich.append(new Option('Foo', 'foo', true, true));
// $.each(sandwichOptions, function(val, text)
// {sandwich.append(new Option(text, val, true, true))}); //, {value: "Item1", text: "Item1"}));
var salads = $('#salads').clone();
salads.name = "salads"+r;
var dessert = $('#dessert').clone();
dessert.name = "dessert"+r;
var name_input = document.createElement('input');
name_input.type = 'text';
name_input.name = "name_input"+r;
var special_request = document.createElement('input');
special_request.type = 'text';
special_request.name = "special_request"+r;
trow.append($("<td>").text(r));
trow.append($("<td>").append(name_input));
trow.append($("<td>").append(sandwich.show()));
trow.append($("<td>").append(salads.show()));
trow.append($("<td>").append(dessert.show()));
trow.append($("<td>").append(special_request));
trow.attr("id","row"+r);
tbody.append(trow)
}
}
function add_row(tbody) {
var r = row_counter
var trow = $("<tr>");
var sandwich = $('#sandwiches').clone();
sandwich.name = "sandwich"+r;
var salads = $('#salads').clone();
salads.name = "salads"+r;
var dessert = $('#dessert').clone();
dessert.name = "dessert"+r;
var name_input = document.createElement('input');
name_input.type = 'text';
name_input.name = "name_input"+r;
var special_request = document.createElement('input');
special_request.type = 'text';
special_request.name = "special_request"+r;
trow.append($("<td>").text(r));
trow.append($("<td>").append(name_input));
trow.append($("<td>").append(sandwich.show()));
trow.append($("<td>").append(salads.show()));
trow.append($("<td>").append(dessert.show()));
trow.append($("<td>").append(special_request));
trow.attr("id","row"+r);
trow.appendTo(tbody);
}
$(document).ready(function() {
table = $('form #order_table');
$('#refresh').click(function() {
//you can simplify the code by making the addition or deletion of rows triggered
var value = $('#CustNum').val();
$('#refresh').val("Clear/Reset Form");
createTable(table, value, 5);
row_counter = value;
table.show();
$('#add_row').show();
//$('#delete_row').show();
$('#email').show();
$('#send_button').show();
$('#row_count').text(row_counter);
});
$('#add_row').click(function() {
row_counter = parseInt(row_counter) + 1;
add_row(table);
$('#CustNum').val(row_counter);
$('#row_count').text(row_counter);
});
$('#delete_row').click(function() {
//if (row_counter == 1) return;
$('#row'+row_counter).remove();
row_counter = parseInt(row_counter) - 1;
$('#CustNum').val(row_counter);
$('#row_count').text(row_counter);
});
$(document).click(function() {
if (parseInt(row_counter) > 1) {$('#delete_row').show()}
else {$('#delete_row').hide()};
});
$('#CustEmail').focus(function() {
if ($('#CustEmail').val() == 'email') {$('#CustEmail').val('')
.css('color','#000000')
.css('font-style','normal')
};
});
$('#CustEmail').blur(function() {
if ($('#CustEmail').val() == '') {$('#CustEmail').val('email')
.css('color','#A0A0A0')
.css('font-style','italic')
};
});
});
<form id = "testxx" method = "post">
enter number of customers:
<input type="number" name = "CustNum" id = "CustNum" value=1 min=1>
<input type="button" value="Generate Form" id="refresh">
<input type="button" value="Add Row" id="add_row" style ="display: none;">
<input type="button" value="Delete Row" id="delete_row" style ="display: none;">
<table id="order_table" style="display: none;" name = "test">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Sandwich</th>
<th>Salad</th>
<th>Dessert</th>
<th>Special Requests<th>
</tr>
</thead>
<tbody id = "body">
</tbody>
</table>
<select id="sandwiches" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>
<select id="salads" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>
<select id="dessert" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>