开发者问题收集

使用 javascript 创建元素

2017-10-11
197

我有一个 html 表

<table id = "rpttable" name = "rpttable">
  <thead>
    Column Headers here...
  </thead>
  <tbody id = "rptbody" name = "rptbody">
    data here <3 ....
  </tbody>
</table>

这是我的 php(sample.php)

<?php
  Query Code here..
  Query Code there..
  and so on

  //this is the way I populate a table
  while (query rows) {
    echo '<tr>';
    echo '<td>Sample Data</td>';
    echo '</tr>;
  }
?>

因此,为了使其工作并填充表格,这就是我所做的。

<table id = "rpttable" name = "rpttable">
  <thead>
    Column Headers here...
  </thead>
  <tbody id = "rptbody" name = "rptbody">
    <?php
       include 'folder_location/sample.php';
    ?>
  </tbody>
</table>

忽略输出的图像,但是当我转到 检查元素 或甚至 Ctrl + u 时,我会看到我的表格结构现在是这样的。

<table id = "rpttable" name = "rpttable">
  <thead>
    Column Headers here...
  </thead>
  <tbody id = "rptbody" name = "rptbody">
    <tr>
    <td>Sample Data</td>
    </tr>
  </tbody>
</table>

现在事情是这样的。我不会这样做,这是我所做的。

$("#rpttable tr").remove();
        for (i = 0; i < data.length; i++) {
            tr = $("<tr />");
            for (x in data[i]) {
                td = $("<td />");
                td.html(data[i][x]);
                tr.append(td);
            }
            rpttable.append(tr);                    
        }

相同的输出它确实填充了表格,但是当我转到 Inspect Element 或甚至 Ctrl + u 时,输出是。

<table id = "rpttable" name = "rpttable">
  <thead>
    Column Headers here...
  </thead>
  <tbody id = "rptbody" name = "rptbody">
    **This is the part missing**
  </tbody>
</table>

我的问题是如何使用 javascript/ajax 创建一个元素?在 php 中输出相同。我的意思是写入元素。

** 已更新 ** 我正在尝试从外部文件运行 css 类,如果我手动编辑它以满足我的需求,我将花费很长时间,而且我很难解释它是表格的类。我尝试在 <table> 中使用默认值使用该类。你知道在后端手动编写它。现在我尝试使用 php 和 ajax 来填充它,到目前为止一切顺利,它确实填充了,但是当我尝试运行该类时,该类不起作用。

谢谢

3个回答

使用 jquery,您可以使用以下命令将 html 行添加到 tbody:

$("#rptbody").html("<tr><td>value</td></tr>");

这是您想要做的吗?

Mark Redman
2017-10-11

您可以使用 JQuery append() 方法:

$('#rptbody').append('<tr><td>my data</td><td>more data</td></tr>');

如果您需要在最后一行后插入:

$('#rptbody> tbody:last-child').append('<tr>...</tr><tr>...</tr>');
AlexCode
2017-10-11
for (i = 0; i < 5; i++) {
     let tr = $("<tr />");
      for (j=0; j < 5;j++)
         tr.append($("<td />",{html:j,class:"tbl"}));
      $("tbody").append(tr);                    
}
.tbl{border:1px solid pink;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody></tbody>
</table>
Farhad Bagherlo
2017-10-11