php - jQuery - 在foreach循环中,php AJAX HTML :更改唯一的table数据

我是php和ajax的新手,

我有一个如下所示的PHTML模板:


<?php


$content ="";


// creates data selector


$content .="


 <form id = select_data>


 <select id = data_selection>


 <option value = data1>Data 1</option>


 <option value = data2>Data 2</option>


 <option value = data3>Data 3</option>


 <option value = data4>Data 4</option>


 </select>


 <input id = selected_data type=submit />


 </form>";


// creates table header


$content .="


 <tr>


 <th>Data</th>


 </tr>";



$array_ids = array(1, 2, 3); // etc, array of object id's


foreach ($array_ids as $array_id) {


 $object = // instantiate object by array_id, pseudocode


 $object_data = $object->getData('default-data'); // get default data to display


 // create table item for each object


 $content .="


 <tr>


 <td><p>$object_data</p></td>


 </tr>";


}


print $content;


?>



这将打印出table内容,按对象的id加载对象,


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>


<script>


$(document).ready(function(){


 $('#select_data').on('submit', function(e){ // get selected data type


 e.preventDefault();


 var data_selected = $("#data_selection :selected").val(); // create var to pass to ajax


 $.ajax({


 type:"POST",


 url: 'post.php',


 data: {data_selected: data_selected},


 success: function(data){


 $("p").html(data); // replace all <p> tag content with data


 }


 });


 });


});


</script>



这个javascript获取选定的数据类型,用它创建一个变量来传递给ajax,然后调用,


<?php


$attribute = false;


if (isset($_POST['data_selected'])){


 $data = $_POST['data_selected']; // assigns variable out of ajax data


 $object = //instantiate object, again pseudocode


 $object_data = $object->getData($data); // get new data to replace into the ```<p>``` tag


 echo $object_data;


}


?>



问题是,我对每个<p>标记都做了更改,因为每个标记都由foreach循环,

我尝试使用以下方法标识每个<p>标记:


<td><p id = $array_id>$object_data</p></td>



然后用数组id创建一个新的javascript变量:


var p_tag_id = <?php echo $array_id; ?>;



最后在var p_tag_id上基于id的ajax成功函数target element :


$("#" + p_tag_id).html(data);



虽然这不会更改所有<p>标记,因为它只更改最后的<p>标记。

我该如何重写此代码,以便Ajax唯一地更新每个表项的数据,而不是使用相同的数据来更新它们? 有更好的方法解决这个问题?

时间:

你需要一种方法来标识包含table标签的<p>行(可能要更新)。

你可以从data_selected变量中得到clicked选项的编号,使用slice去除最后一个字符(


var num = data_selected.slice(-1) - 1;



(减去1,因为表行的索引为零)

然后,在AJAX代码块的成功函数中:


$('table tr').each(function(i,v){


 if (i == num){


 $(v).find('td').find('p').html(data);


 }


});



上面的代码抓取了所有的表行(作为一个集合),并逐一遍历它们,在函数中,i是行的索引号,v是行本身,索引编号从零开始,这就是你先前从(对于eg )减去data3的原因,当你找到正确的行号时,使用.find()和。

...