0

我可以即时编辑 jquery 加载的 html 文件吗？我想加载 html 文件，然后使用 jquery 对其进行操作以将一些内容复制到其中。

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

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

问候

4

6 回答 6

2

根据需要向表中插入多少数据，您可能需要考虑jTemplates.

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

Dave Ward在他的博客上有一个例子。

他的模板：

<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);
}
于 2012-09-26T17:15:58.147 回答
1

尝试这个，

$("div").load('loadfile.html').find('#someDivId').html("new text");
于 2012-09-26T17:12:46.167 回答
1

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

 var inMemoryDiv = $("<div />").load('loadfile.html')
                               .find('#someElement')
                               .html("new content");
于 2012-09-26T19:00:22.663 回答
0

据我了解你的问题，

假设 div#result 是隐藏的。通过下面的加载方法，它允许您加载 loadfile.html 文件的特定部分。我假设 #container 是您要从 loadfile.html 加载的 div#container（而不是加载整个文件）。

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

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

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

从 DOM 中删除 div#result。

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

于 2012-09-26T18:07:15.037 回答
0

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

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

    });
于 2012-09-26T18:56:41.543 回答
0

.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);
    ....
});
于 2012-09-26T18:02:48.923 回答