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>

完整的代码发布在下面：

<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。

在jQuery AJAX成功操作数据：功能

1 个答案: