如何使用从 ajax 返回的字符串来使用 php mysql、jquery 填充 html 表答案

【问题标题】：how a string return from ajax can be used to populate html table using php mysql, jquery如何使用从 ajax 返回的字符串来使用 php mysql、jquery 填充 html 表
【发布时间】：2015-04-22 07:16:28
【问题描述】：

我想用 ajax 返回的数据填充 html 表。我将如何做到这一点。下面是从 ajax 返回的字符串：

1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013 -2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014 ,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014,

我想到的是像这样拆分整个字符串：

var dataarr = data.split(',');

拆分后，再次拆分将转换为三个单独的数组

var dataarr = data.split('-');

然后使用循环填充 html 表。但不知道如何在php中完成。我已经在网上搜索过了。我不想使用“json”而是尝试使用“mysqli”来实现请指导我？

【问题讨论】：

我不明白这个问题。从 Ajax 调用获得响应后，您只能使用 Javascript 处理它。 PHP 仅在整个页面重新加载时处理。
是的，您看到的字符串是从 ajax 返回的数据。我想使用 data.split() 用这些数据填充 html 表。但我不知道该怎么做
1st : 为我们提供一个填充了您的数据的最终 html 表的示例。 2nd : 如果您从使用 Ajax 开始，您将需要 JavaScript 来更改表格以使用您从 php 脚本中取回的值填充它，但是在 Ajax 之后使用 php 是不可能的，因为您需要对视图进行异步更改。

标签： php jquery ajax

【解决方案1】：

您可以将.split() 与.map() 结合使用来实现此目的：

$(function() {

  $('#create').change(function() {
    createTable($(this).val(), $('#tblBdy'))
  });

  function createTable(data, tbl) {
    var bdy = $.map(data.split(','), function(tr, i) {
      return $('<tr></tr>').html(
        $.map(tr.split('-'), function(td, i) {
          return $('<td></td>').html(td);
        })
      );
    });
    tbl.html(bdy);
  }

  $('#tblBdy').on('click', 'tr', function() {
    var tableData2 = $(this).closest("tr").children("td").map(function() {
      return $(this).text();
    });
    $('#bx1txt').val($.trim(tableData2[0]));
    $('#bx2txt').val($.trim(tableData2[1]));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="create">
  <option value="">Select one</option>
  <option value="6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014">first group</option>
  <option value="1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014">second group</option>
  <option value="3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014">third group</option>
  <input type="text" id="bx1txt" value="" />
  <input type="text" id="bx2txt" value="" />
</select>
<br>
<br>
<table border="1">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Price</th>
      <th>Start</th>
      <th>End</th>
    </tr>
  </thead>
  <tbody id="tblBdy"></tbody>
</table>

【讨论】：

感谢一百万为我提供代码。除了一件小事之外，一切都完美无缺 - 每当我从下拉列表中选择另一个值时，表格不会显示更改值。仅当我刷新页面并从下拉列表中选择一个值时，才会显示更改值。如何做到这一点 - 即。当用户在下拉列表中选择另一个值时更改表格内容。请指导。
@Suneet 如果我理解正确，上面的编辑应该会为你解决这个问题
感谢回复。我已经使用 javascript 控制台检查了这一点。每次我从下拉列表中选择一个值时，都会出现一个新字符串。但这不会改变表格的内容。只有当我刷新页面并从下拉列表中再次选择值时它才会改变
再一次查询，=> 表格填充后，如果我们想在文本框中显示表格的点击列数据，我们如何实现？请帮忙。我正在使用这个 jquery，但这不起作用，如下所示： $('table#insallrates tbody tr').click(function() { var tableData2 = $(this) .closest("tr").children("td ").map(function() { return $(this).text(); }).get(); $('#bx1txt').val($.trim(tableData2[0])); $(' #bx2txt').val($.trim(tableData2[1])); });请帮忙
@Suneet 更新，问题是你尝试的方式只有在页面加载时页面上存在元素时才有效，如果元素是动态生成的，就像你正在做的那样，你有使用.on() 绑定到页面加载时确实存在的元素，并让它侦听对动态添加的元素（如$('#tblBdy').on('click', 'tr', function () { //code goes here..... });）的点击，这称为“事件委托”，请参阅learn.jquery.com/events/event-delegation 以获得更好的理解