使用javascript创建元素 [英] Create an element using javascript

问题描述

我有一个html表

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

这是我的php(sample.php)

and here is my 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>;
  }
?>

因此，要执行此操作并填充表格，这就是我要做的事情.

So to make this work and to populate the table this is what I do.

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

忽略输出的图像，但是当我转到 Inspect Element 甚至是 Ctrl + u 时，我现在将看到我的表结构是这样的.

Disregard the image of the ouput but when I go to Inspect Element or even Ctrl + u I will see my table structure now is like this.

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

现在这是东西.我不这样做，这就是我要做的.

Now here is the thing. I do not do that this is what I do.

$("#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 时，输出是.

Same output It does populate the table but when I go to Inspect Element or even Ctrl + u the output is.

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

我在这里的问题是如何从字面上创建使用usung javascript/ajax的元素?在PHP相同的输出.我的意思是写元素.

My question here is how can I literaly create an element usung javascript/ajax? same output in php. I mean write the element.

**更新**我正在尝试从外部文件运行css类，如果我根据自己的需要手动对其进行编辑，则我将花费一个小时，并且这也很难解释其用于表的类.我尝试使用< table> 中的默认值使用该类.您知道手动将其写在后端.现在我正在尝试使用php和ajax填充它，到目前为止，它确实可以填充，但是当我尝试运行该类时，该类不起作用.

** Updated ** I am trying to run a css class from an external file and If I manualy edit it to suits my needs I will a long hour and also Its hard for me to explain its a class for table. I tried to use that class using default value in <table>. You know manualy write it at the back end. now Im trying to populate it using a php and ajax so, so far so good it does populate but when I try to run the class the class does not work.

TYSM

推荐答案

尝试一下:

$("#rpttable tbody tr").remove();
var content = '' ;
for (i = 0; i < data.length; i++) {
    content += "<tr>" ;

    for (x in data[i]) {
        content += "<td>" + data[i][x] + "</td>" ;
    }

    content += "</tr>" ;
}

$("#rpttable tbody").html(content) ;

已更新

我也在使用Google Chrome.请尝试以下代码，并在每次添加新行时检查检查元素.您可以在检查元素中看到 html 发生变化！

I am using Google Chrome too. Please try the below code, and check the inspect element each time you add a new row. You can see the html in the Inspect Element changing!

function AppendNewRowToTable() {
  var trLen = $("table tbody tr").length ;

  var content = "" ;

  content += "<tr>" ;
  for (i = 0; i < 5; i++) {
        content += "<td>" + trLen + "-" + i + "</td>" ;
    }
  content += "</tr>" ;

  $("table tbody").append(content) ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:;" onclick="AppendNewRowToTable()">Add new Row</a>
<br />

<table>
  <thead>
    <tr>
      <th>Title 01</th>
      <th>Title 02</th>
      <th>Title 03</th>
      <th>Title 04</th>
      <th>Title 05</th>
    </tr>
  </thead>

  <tbody></tbody>
</table>

这篇关于使用javascript创建元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！