0

jqueryによってロードされたhtmlファイルをその場で編集できますか？htmlファイルをロードし、jqueryを使用して操作してコンテンツをコピーしたいと思います。

私が見るすべての例は、ファイルをロードしてからコンテンツをdivにコピーすることを示しています。

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

よろしく

4

6 に答える 6

2

テーブルに挿入する必要のあるデータの量によっては、を検討することをお勧めしますjTemplates。

jTemplatesを使用すると、HTMLテンプレートを作成し、データオブジェクトまたは配列を渡すときに入力されたHTMLを作成できます。

DaveWardのブログに例があります。

彼のテンプレート：

<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

.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 に答える
0

私があなたの質問を理解している限り、

div＃resultが非表示になっていると仮定します。以下のloadメソッドにより、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 に答える