質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2145questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    156questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

JavascriptでHTMLのテーブルへの書き込みについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,384

fama

score 79

当質問を気にかけて頂きありがとうございますm(_ _)m
この度の質問は、webデザインについての質問になります。

現在、下記のような形で、ボタンをクリックするとテーブルに記入されたTwitterIDのフォロー数&フォロワー数を取得してテーブルに書き込むというソフトを開発しています。

<body>
    <div id="topflame">

        ID:
        <input type="text" id="twitterid"> PASS:
        <input type="text" id="twitterpass">
        <input type="button" value="追加" onclick="insertRow();">
        <input type="button" value="通信" onclick="GetData();">
        <input type="button" value="Set" onclick="SetData();">

    </div>
    <div id="downflame">
        <div id="itsthetable">
            <table>
                <tbody id="account">
                    <tr>
                        <th class="free">表示名</th>
                        <th class="free">TwitterId</th>
                        <th class="free">TwitterPass</th>
                        <th class="pro">フォロー数</th>
                        <th class="pro">フォロワー数</th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
function SetData() {
    var account = document.getElementById("account");
    for(var i = 1 ; i < account.rows.length + 1 ; i++){
    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
    request(url, function(error, response, body) {
            if (!error && response.statusCode == 200) {
                if (body.match(/e=.*人のフォロワー/i)) {
                    var follower = body.match(/e=.*人のフォロワー/i);
                    follower = follower.toString().substr(3);
                    follower = follower.toString().replace("人のフォロワー","");
                    follower = follower.toString().replace(",","");
                    ListFollowerCount.push(follower); 
                }
                if(body.match(/e=.*人をフォロー中/i)){
                    var follow = body.match(/e=.*人をフォロー中/i);
                    follow = follow.toString().substr(3);
                    follow = follow.toString().replace("人をフォロー中","");
                    follow = follow.toString().replace(",","");
                    ListFollowCount.push(follow);              
                }
            }
        })  
    }
}

上記JavaScriptでfollowerにフォロワー数、followにフォローの取得に成功しています。
ここから、この取得したデータをテーブルに書き込みたいのですが、どうしてもうまくいかず困っています。

テーブルに書き込む処理を以下にように記述してみたのですが

function SetData() {
    var account = document.getElementById("account");
    for(var i = 1 ; i < account.rows.length + 1 ; i++){
    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
    request(url, function(error, response, body) {
            if (!error && response.statusCode == 200) {
                if (body.match(/e=.*人のフォロワー/i)) {
                    var follower = body.match(/e=.*人のフォロワー/i);
                    follower = follower.toString().substr(3);
                    follower = follower.toString().replace("人のフォロワー","");
                    follower = follower.toString().replace(",","");
                    ListFollowerCount.push(follower);
            //追記箇所 ※※※
                    account.rows[i].cells[4].innerText = ListFollowerCount[i - 1]; 
                }
                if(body.match(/e=.*人をフォロー中/i)){
                    var follow = body.match(/e=.*人をフォロー中/i);
                    follow = follow.toString().substr(3);
                    follow = follow.toString().replace("人をフォロー中","");
                    follow = follow.toString().replace(",","");
                    ListFollowCount.push(follow);       
            //追記箇所 ※※※
                    account.rows[i].cells[3].innerText = ListFollowerCount[i - 1];        
                }
            }
        })  
    }
}


このように、テーブルIDのaccountを取得し、account.rows[i].cells[3].innerText = ListFollowerCount[i - 1];  というような形で記述しているのですが、これだとテーブルの表示がまったく更新されません。

取得まで成功しているので後はテーブルへの挿入だけなのですが、どこに間違えががあるのか、玄人の方、アドバイス頂ければ嬉しく思います。
かれこれ同じ箇所で2時間くらい悩みまして、進みそうにないので助けを求めてみました。
どうぞ、よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

一つ目のソースがおかしいというのは、正しい位置に表示されないという意味ですかね?
だとしたら、配列にpushしている時としていない時があるのが原因ではないかと。

二つ目のソースが更新できないのは、
コールバックが呼ばれる時にはiの値が変わっているのが原因ではないですかね。

以下で対応できるのではないかと思います。

var timer;
function SetData() {
    var account = document.getElementById("account");
    for(var i = 1 ; i < account.rows.length; i++){
    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
    request(url, function(error, response, body) {
            if (!error && response.statusCode == 200) {
                if (body.match(/e=.*人のフォロワー/i)) {
                    var follower = body.match(/e=.*人のフォロワー/i);
                    follower = follower.toString().substr(3);
                    follower = follower.toString().replace("人のフォロワー","");
                    follower = follower.toString().replace(",","");
                    ListFollowerCount.push(follower); 
                }else {
                    ListFollowerCount.push("");
                }
                if(body.match(/e=.*人をフォロー中/i)){
                    var follow = body.match(/e=.*人をフォロー中/i);
                    follow = follow.toString().substr(3);
                    follow = follow.toString().replace("人をフォロー中","");
                    follow = follow.toString().replace(",","");
                    ListFollowCount.push(follow);              
                }else {
                    ListFollowCount.push("");
                }
            }
        })  
    }
    displayUpdate();
}
function displayUpdate(){
    if (ListFollowerCount.length = account.rows.length - 1){
        // データが出そろったら更新
        for(var i = 1 ; i < account.rows.length; i++) {
            account.rows[i].cells[4].innerText = ListFollowerCount[i - 1];
            account.rows[i].cells[3].innerText = ListFollowerCount[i - 1];
        }
    }else{
        setTimeout(displayUpdate, 100);
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/25 19:54

    こちら、非常に参考になるコードで回答して頂きましてありがとうございました。
    様々な部分がとても勉強になりました。
    ありがとうございます。

    キャンセル

  • 2016/03/26 18:23

    すみません、1行目に余分な処理がありました。
    無視してください。

    キャンセル

0

現状thタグを含むtr列しかないので、account.rowsは要素数が1なのでは?
よってaccount.rows[1]にはアクセス不能になるのでは。
列追加するならinsertRowしないと。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/24 09:39

    わかりにくくてすみません!insertRowはされた状態だと思って頂ければ幸いです。Javascriptの方、見難くなると思いinsertRow関数は省略しておりまして、実際は複数行になっている状態です。

    キャンセル

  • 2016/03/24 09:44 編集

    では「account.rows[1].cells.length」はいくつになってますか?
    insertRow直後のtr列は中身(tdタグ/cell)が入ってない状態のはずですが。
    ここでinsertCellしてますか?
    ■追記:
    「account.rows[i]」で意図した行が取れているのかも気になります。
    また、「account.rows[i].cells[3].innerText =follow」としない理由はなんでしょう?

    キャンセル

  • 2016/03/25 19:55

    この度、上記の方の回答にて解決する事が出来ました。
    何度かご対応頂きましてありがとうございます。
    今後ともよろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2145questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    156questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。