Question

我有一个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>

忽略输出的图像，但当我转到Inspect Element甚至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>

我的问题是我如何才能文化地创建一个元素usung javascript / ajax？ php中的相同输出。我的意思是写元素。

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

TYSM

Answer 1

使用jquery，你可以使用：

将html行添加到tbody

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

这是你想要做的吗？

Answer 2

试试这个：

$("#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。请尝试以下代码，并在每次添加新行时检查inspect元素。您可以在html更改中看到Inspect Element

＆＃13;

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) ;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用JQuery append（）方法：

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

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

$('#rptbody> tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Answer 4

 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>

Answer 5

你已经问了大约两个问题。让我们分解吧。

我的问题是我如何才能文化地创建一个元素usung javascript / ajax？

您已经使用Javascript（客户端）代码执行此操作。看起来你正在使用jQuery语法，所以我们会坚持这一点。这个创建一个元素并将其插入到页面中。

var $el = $("<div>I'm a new div element</div>");
$('body').append( $el );

这将创建一个新元素，将其分配给$el变量，然后将其附加到页面主体。这将不显示在＆＃34;查看页面来源＆＃34;然而，观点。为什么？因为这会修改 DOM - 动态对象模型。

要查看此新元素，您需要查看呈现的输出（用户/您看到的内容），或者打开浏览器的DevTools（通常是<F12>，或者右键单击 - ＆gt;检查）。在DevTools中，找到＆＃34; Inspector＆＃34;选项卡（或等效的），然后在DOM的实时视图中查找新元素。

... php中的相同输出。

简而言之，你不能。 Ctrl + U / View Page Source显示的是最初从服务器接收的页面。如果您使用命令行工具（例如curl或wget），这将是您将看到的确切内容：

curl http://url.to.your.com/page

由于您在服务器上include 'folder_location/sample.php' ，因此在浏览器看到之前页面中包含此内容。为了您的启发，我会考虑阅读DOM。

Wikipedia

W3

Answer 6

您的意图似乎是在PHP脚本生成的html响应中向表中追加额外的行。

为此，您无需清除所有现有行。

$("#rpttable tr").remove();

构建一个行数组并向表体附加一次。

var $tbody = $('#rptbody');
var tableRowAdditions = [];

for (var i = 0; i < data.length; i++) {
  var $tr = $("<tr></tr>");

  for (var x in data[i]) {
     var $td = $("<td></td>");
     $td.html(data[i][x]);
     $tr.append(td);
  }
  tableRowAdditions.push(tr);                   
}

$tbody.append(tableRowAdditions);

Answer 7

对于“纯”JavaScript方法，您可以使用createElement Web API

创建元素

例如：带有文本“Hello”的段落将是

var container = document.getElementById('rptbody');
var hello = document.createTextNode('Hello');
var helloParagraph = Document.createElement('p');
// Add text to paragraph
helloParagraph.appendChild(hello);
// Append to container
container.appendChild(helloParagraph);

Answer 8

使用jQuery创建元素的最佳方法是使用以下格式：

＆＃13;

// Create the TR and TD elements as jQuery objects.

var tr = $("<tr></tr>", {
  "id":"tr1",
  "class":"tr"
});

var td = $("<td></td>", {
  "id":"td1",
  "class":"td",
  "text": "Sample Data",
  click: function() {
    // optional: Function to attach a click event on the object
    alert("Clicked!");
  }
});

// Attach the element to the document by appending it 
// inside rptbody (after all existing content inside #rptbody) 
$("#rptbody").append(tr);
tr.append(td);

// OR, Attach the element to the document by prepending it
// inside rptbody (before all existing content in #rptbody) 
$("#rptbody").prepend(tr);
tr.append(td);

// OR, Attach the element to the document by completely replacing the content of #rptbody
$("#rptbody").html(tr);
tr.append(td);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "rpttable" name = "rpttable">
  <thead>
    Column Headers here...
  </thead>
  <tbody id = "rptbody" name = "rptbody">
  </tbody>
</table>

＆＃13;

使用javascript创建一个元素

8 个答案: