0

私はjavascriptが初めてで、ファイルを読み取ってその内容をブラウザに表示しようとしています。

私はこれまでにこのコードを持っています:

<script type="text/javascript">
        var fname ;
        if(navigator.appName.search('Microsoft')>-1) { fname = new ActiveXObject('MSXML2.XMLHTTP'); }
        else { fname = new XMLHttpRequest(); }

        function read(filename) {
            fname.open('get', filename, true);
            fname.onreadystatechange= steady;
            fname.send(null);
        }

        function steady() {
            if(fname.readyState==4) {
                var el = document.getElementById('read_file');
                el.innerHTML = fname.responseText;
            }
        }
    </script>

しかし、私が得る出力は次のとおりです。

x   y 5 90 25   30 45   50 65   55 85   25

データの形式は次のとおりです。

 x    y
 5    90
 25   30   
 45   50   
 65   55 
 85   25

2 つの質問:

1）上記の形式で表示するにはどうすればよいですか

2）今のところ、これはボタンをクリックすると発生します..ボタンをクリックするのではなく、この特定のファイルから自動的に読み取る方法はありますか

これは私のhtmlコードがどのように見えるかです

<input type="button" value="load file"  onclick="read('data.tsv')">

この「onclick」を取り除き、ファイルを読みたいだけです

ありがとう

4

4 に答える 4

3

上記の形式で表示するにはどうすればよいですか？

コンテンツを挿入する要素がwhite-space: preスタイリングに使用されていることを確認してください。使用されていない場合、スペースが凝縮されます。また、、、、などの特殊文字は<、>で使用するため"に&エスケープする必要があることに注意してinnerHTMLください。通常<pre>、要素は間隔を維持する必要がある場合に使用されます。

今のところ、これはボタンをクリックすると発生します。ボタンをクリックするのではなく、この特定のファイルから自動的に読み取る方法はありますか？

<script>要素の後にが実行される場合は#read_file、次の関数を呼び出すだけです。

read('data.tsv');

そうでない場合はonload、ページの読み込みが完了したときに実行されるイベントハンドラーを設定できます。

window.onload = function () {
    read('data.tsv');
};
于 2013-02-06T22:01:23.163 に答える
2

ボタンを削除するには、JavaScript の末尾に呼び出しを追加します。

    // ...

    read('data.tsv');
</script>

ファイル内で見つけたデータを表示するには、いくつかの方法があります。

1つ目は、空白を保持する要素でラップすることです...

el.innerHTML = '<pre>' + fname.responseText + '</pre>';

または、すべての改行とタブ/スペースを HTML に置き換えることもできます。たとえば、改行を<br>タグに変換し、スペースを非改行スペースに置き換えることができます: &nbsp;.

表に表示するために改行と空白で分割することもできます。これは、持っている情報の種類を表示する正しい方法です。

于 2013-02-06T22:01:53.757 に答える
1

newlineの代わりに<br>を置き換える必要があります。ブラウザのnewlineが表示されない

于 2013-02-06T22:01:25.723 に答える
1

<pre>タグを使用する必要がある形式については、元の形式が保持されるようにします。詳細については、 http ://www.w3schools.com/tags/tag_pre.asp をご覧ください。

ユーザーの介入なしで実行するには、次を使用します<body onload="read('data.tsv')">

楽しんで ！

于 2013-02-06T22:01:47.000 に答える