在jQuery的AJAX的成功操作數據：功能

Question

我有這個功能

jQuery.ajax({ 
    type: "POST", 
    url: jQuery("#exam_form").attr('action'), 
    data: jQuery("#exam_form").serialize(), 
    success: function(result){ 
     //Add row 
     table.append(result); 

     console.dir(result); 
} 
}); 

它這個輸出到

<tr> 
<td class="tg-yw4l">01/03/2017</td> 
<td class="tg-yw4l">P123</td> 
<td class="tg-yw4l">Test Exam P123</td> 
<td class="tg-yw4l">AM</td> 
<tr> 

我想補充<input>場到表中的數據，內搭控制檯值從<td>所以HTML會看起來像這樣：

<tr> 
<td class="tg-yw4l"><input type="text" name="date" value="01/03/2017"> 01/03/2017</td> 
<td class="tg-yw4l"><input type="text" name="date" value="P123">P123</td> 
<td class="tg-yw4l"><input type="text" name="date" value="Test Exam P123">Test Exam P123</td> 
<td class="tg-yw4l"><input type="text" name="date" value="AM">AM</td> 
<tr> 

f ULL代碼下面貼：

<form id="exam_form" method="get" action="<?php echo  get_stylesheet_directory_uri(); ?>/inc/ajax_submit.php"> 

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('#exam_board').change(function() { 
     var $examBoard=jQuery('#exam_board').val(); 
     // call ajax 
     jQuery("#exam_level").empty(); 
     jQuery.ajax({ 
      url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",  
      type:'POST', 
      data:'action=my_special_ajax_call&exam_boardid=' + $examBoard, 
      success:function(results){ 
       //alert(results); 
       jQuery("#exam_level").removeAttr("disabled");  
       jQuery("#exam_level").append(results); 
      } 
     });          
}); 

jQuery('#exam_level').change(function() { 
    var $examLevel=jQuery('#exam_level').val(); 
    jQuery("#loading-animation").show(); 
    // call ajax 
    jQuery("#exam_code").empty(); 
    jQuery.ajax({ 
     url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",  
     type:'POST', 
     data:'action=my_special_ajax_call&exam_levelid=' + $examLevel, 
     success:function(results){ 
      //alert(results); 
      jQuery("#exam_code").removeAttr("disabled");  
      jQuery("#exam_code").append(results); 
     } 
    });          
}); 

}); 

</script> 

<?php 
    $args = array(
     'show_count' => 0, 
     'selected' => -1, 
     'hierarchical' => 1, 
     'exclude' => 1, 
     'show_option_none' => 'Exam Board', 
     'name' => 'exam_board', 
     'depth' => 1, 
     'taxonomy' => 'examination' 

    ); 
    wp_dropdown_categories($args); 
?> 

<select name="exam_level" id="exam_level" disabled="disabled"></select> 
<select name="exam_code" id="exam_code" disabled="disabled"></select> 
<a id="target" href="#">Add Exam</a> 
</form> 

<table id="myTable"> 
    <tbody> 
     <tr><td>Exam Board</td><td>Exam Level</td><td>Exam Code</td> <td>AM/PM</td></tr> 
    </tbody> 
</table> 

<script> 
jQuery("#target").click(function() { 
    var tbody = jQuery('#myTable').children('tbody'); 
    //Then if no tbody just select your table 
    var table = tbody.length ? tbody : jQuery('#myTable'); 
    jQuery.ajax({ 
    type: "POST", 
    url: jQuery("#exam_form").attr('action'), 
    data: jQuery("#exam_form").serialize(), 
    success: function(result){ 
     //Add row 
     table.append(result); 
      console.dir(result); 
     } 
}); 
}); 

</script> 

這是functions.php中的AJAX功能

function implement_ajax() { 
    if(isset($_POST['exam_boardid'])){ 
     $categories= get_categories('parent='.$_POST['exam_boardid'].'&hide_empty=0'.'&taxonomy=examination'); 
     foreach ($categories as $cat) { 
      $option .= '<option value="'.$cat->term_id.'">'; 
      $option .= $cat->cat_name; 
      $option .= '</option>'; 
     } 
     echo '<option value="-1" selected="selected">Exam Level</option>'.$option; 
    die(); 
    } // end if 
if(isset($_POST['exam_levelid'])){ 
    $categories= get_categories('parent='.$_POST['exam_levelid'].'&hide_empty=0'.'&taxonomy=examination'); 
    foreach ($categories as $cat) { 
     $option .= '<option value="'.$cat->term_id.'">'; 
     $option .= $cat->cat_name; 
     $option .= '</option>'; 
    } 
    echo '<option value="-1" selected="selected">Exam Code</option>'.$option; 
    die(); 
} // end if 


} 
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax'); 
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax'); //for users that are not logged in. 

Answer 1

一個簡單hack的解決辦法是做到以下幾點

jQuery.ajax({ 
    type: "POST", 
    url: jQuery("#exam_form").attr('action'), 
    data: jQuery("#exam_form").serialize(), 
    success: function(result){ 
     //Add row 
     table.append(result); 

     // append inputs to last appended rows 
     tr = table.find("tr").last(); 
     tds = tr.find("td"); 
     jQuery.each(tds, function(index, td){ 
      jQuery(td).html('<input type="text" name="date" value="'+jQuery(td).html()+'">'); 
     }) 
     console.dir(result); 
    } 
}); 

不過我同意服務器輸出部分的@ADyson。