Question

我编写了以下代码来动态构建一个表，然后将其发送到服务器并通过电子邮件传递。但是，当用户发布数据时，它不会发布，下拉字段中的任何项目。我做了很多研究，我认为它与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>

Answer 1

隐藏元素时，不会随表单一起提交删除所选提交的display:none。

Answer 2

谢谢，我能够弄清楚。

我做了几件事要纠正。我把select语句放在form标签里面，我将table var更改为table = $（'＃body'） - tbody的id。我将命名代码从'X'.name ='Y'更改为jquery方法'X'.attr（'name'，'Y'）。

在所有这些变化之间，它终于有效了。感谢。

使用jquery添加到表单内的表的元素不会发布

2 个答案: