【问题标题】:How does one insert <tr> into a <table> (using PHP)如何将 <tr> 插入 <table> (使用 PHP)
【发布时间】:2017-11-23 04:44:26
【问题描述】:

我正在使用 PHP,并且我有一个想要动态填充的表。

<table>
    <tr>
         <th>This One</th>
         <th>That One</th>
         <th>The Other One</th>
    </tr>
    <tr>
         <td>Final This</td>
         <td>Final That</td>
         <td>Final The Other</td>
   </tr>
</table>

我正在填充表数据 onchange,我希望将数据添加到 上方 标有“Final blah”的行。

每个新行都有用于填充每个单元格的数据。

是否有一些功能可以通过 PHP 实现这一点,也许利用一些 JavaScript?

编辑: 我想得到一个看起来像这样的最终产品:

<table>
    <tr>
         <th>This One</th>
         <th>That One</th>
         <th>The Other One</th>
    </tr>
    <tr> Dynamically added row. Cells already populated from database</tr>
    <tr> Next row of data from the database</tr>
    <tr> The next row should **ALWAYS** be the last row</tr>
    <tr>
         <td>Final This</td>
         <td>Final That</td>
         <td>Final The Other</td>
   </tr>
</table>

请注意,我要保留一个标题行!
我想在标题行和带有“最后的东西”的行之间插入行。 最后一行始终存在。

【问题讨论】:

  • 使用一些 ajax 和 jquery 来找到最后一行并将其添加到上面。
  • 需要动态创建tr,添加数据并追加到tbody
  • 试试在你的 PHP 中使用 echo 吧?
  • 是什么驱动了行的添加。 OnChange 什么?
  • 我改变什么都没关系。 something 的 onchange 将一些行插入到标题行下方的 中。

标签: javascript php html


【解决方案1】:

如果我收到您的询问:

 <table id="myTable">
  <tr>
     <th>This One</th>
     <th>That One</th>
     <th>The Other One</th>
  </tr>
   <tbody id="myid">
    <tr><td>Final This</td><td>Final That</td><td>This is your Last Row</td></tr>
   </tbody>
    </table>
    <br>

<button onclick="myCreateFunction()">Add row</button>

<script>
function myCreateFunction() {
    var table = document.getElementById("myid");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "Final This";
    cell2.innerHTML = "Final That";
    cell3.innerHTML = "I am inserted between First and last row";
}

</script>

Fiddle

【讨论】:

  • 没有。 w3schools 的例子就是我在这里问这个问题的原因。我希望表格中的最后一行是相同的,并且所有新行都插入到它上面,标题行下面。
  • 但是再看一遍,也许这个答案就是我需要的答案。我只是不得不争论很多。
  • 这个答案似乎忽略了我的标题行。
  • 在标题和最后一行之间没有插入任何行。
  • 您可以使用 table.insertBefore(newRow, footerRow) 实现此目的
猜你喜欢
  • 2014-03-10
  • 2015-02-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多