Question

我可以动态编辑由jquery加载的html文件吗？我想加载html文件，然后使用jquery操作它来将一些内容复制到其中。

我看到的所有示例都指向加载文件然后将内容复制到div。

$("div").load('loadfile.html');

问候

Answer 1

根据您需要在表格中插入多少数据，您可能需要考虑jTemplates。

jTemplates允许您创建HTML模板，然后在传递数据对象或数组时创建填充的HTML。

Dave Ward有一个例子on his blog。

他的模板：

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Title</th>
      <th>Excerpt</th>
    </tr>
  </thead>
  <tbody>
    {#foreach $T.d as post}
    <tr>
      <td>{$T.post.Date}</td>
      <td><a href="{$T.post.Link}">{$T.post.Title}</a></td>
      <td>{$T.post.Description}</td>
    </tr>
    {#/for}
  </tbody>
</table>

使用数据加载模板：

function ApplyTemplate(msg) {
  // This method loads the HTML template and
  //  prepares the container div to accept data.
  $('#Container').setTemplateURL('RSSTable.htm');

  // This method applies the JSON array to the 
  //  container's template and renders it.
  $('#Container').processTemplate(msg);
}

Answer 2

试试这个，

$("div").load('loadfile.html').find('#someDivId').html("new text");

Answer 3

您可以将其加载到当前不在页面上的新创建的div中

 var inMemoryDiv = $("<div />").load('loadfile.html')
                               .find('#someElement')
                               .html("new content");

Answer 4

.load（）是另一个jquery函数的快捷方式。您可以尝试使用它来代替使用它：

$.ajax({ url: 'loadfile.html', type: 'POST', data: { 'key1': 'val1', 'key2': 'val2' }).done(function(data) {
// Everything in this block is executed as soon as the ajax request is done. The var 'data' will return all the info you requested, same as .load(), but now you can be sure that the DOM will be updated when you process your changes.  
    $('div').html(data);
    ....
});

Answer 5

至于我理解你的问题，

假设div＃results被隐藏。通过以下加载方法，它允许您加载loadfile.html文件的特定部分。我假设#container是你想从loadfile.html加载的div＃容器（而不是加载整个文件）。

$('div#result').load('loadfile.html #container');

做你想做的任何操作。将已编辑的内容复制到您想要的任何div。

$('div#result').empty(); Or .remove()

从DOM中删除div＃result。

如果您有任何疑问，请善意提出。感谢

Answer 6

也许是这样的。这仅在文件位于本地时才有效。

 $(function () {
        var result = "";
        var file = "Default.aspx";

        //Assuming local file. 
        $.get(file, handleData);

        //If remote file, use $.ajax

        //handle data that is returned
        function handleData(data) {
            data = data.replace(/\/\/\<\!\[CDATA\[/ig, "/*");
            data = data.replace(/\/\/\]\]>/ig, "*/");
            result = data.replace("html", "test");

            alert(result);
        }

    });

我可以动态编辑由jquery加载的文件吗？

6 个答案: