テーブルの中身を取得するには？

Question

すみません、以下のHTMLから、tdに値があれば全部取ってきたいのですが、私の書いたjavascriptだとエラーになります。
どなたか教えていただけますでしょうか。

      var table = document.getElementById("A1");
      var names = table.rows[0].cells[0].text();

<div id="A1">
 <table>
  <tbody>
   <tr>
    <td>name1</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="A2">
 <table>
  <tbody>
   <tr>
    <td>name2</td>
   </tr>
  </tbody>
 </table>
</div>

Answer 1

id="A1"をテーブル自体につけて、.text();ではなく.textContent;かな。

 <table id="A1">
  <tbody>
   <tr>
    <td>name1</td>
   </tr>
  </tbody>
 </table>

      var table = document.getElementById("A1");
      var names = table.rows[0].cells[0].textContent;
      console.log(names);
```**動くサンプル：**[https://jsfiddle.net/3ekvu1dx/](https://jsfiddle.net/3ekvu1dx/)

---

【Node.textContent - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Node/textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)

Comments

[rena_168]

すみません、そのHTMLはもう修正できないのです。
そうやってHTMLが以前から作ってありますので、何か良い方法はありますでしょうか？

[kei344]

tableの子要素を探すようにすればできますが、正直最終的に何をしたいかを明確にされないと適切なアドバイスはできません。
ページすべてのtdが取得したいのであればquerySelectorAllで直接採ったほうが早いです。

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

[rena_168]

素晴らしいエディタでびっくりしました！
タグ配置のパターンが色々あって、その都度取りたい値がうまく取れないので、まだまだ初心者ですね＞＜

Answer 2

つまりID配下のtableのtdの要素を取りたいってことですかね。
他の方も言ってますがIDだけだとDIVを取ってきてしまうので、
tableを指定して取得する必要があります。

var table = document.getElementById("A1").getElementsByTagName("table")[0];
var names = table.rows[0].cells[0].textContent;
console.log(names)

Comments

[rena_168]

ご指摘ありがとうございます！うまくできました！
先輩、どうやったら任意の要素の値が取れるようなjavascriptが書けますか？
私いつも問題にぶち当たって、ググってるんですが、イマイチうまく書けないんです。。。
アドバイスを教えていただけますか？

[退会済みユーザー]

document.getElementById　等dom操作関数の引数は　任意の要素を表す値ですが

[rena_168]

document.getElementByIdで対象IDは取ってこれるのは知ってましたが、その配下のtableを指定するのに
getElementsByTagName("table")を書かないといけないのが知らなかったです。
タグもいろんなパターンがあり、どのときにどう書けばいいかがまだ分からない段階ですね。

[rena_168]

yureighostさんへ：
//var table = "document.getElementById('"+input+"').getElementsByTagName('table')[0]";
var table = document.getElementById('A1').getElementsByTagName("table")[0];
var names = table.rows[0].cells[0].textContent;
でname1の値は取得できますが、input変数の行の書き方だと、以下エラーになるのはなぜでしょうか？
【Error内容】
メッセージ：未定義またはNULL参照のプロパティ'0'は取得できません

ご指導お願いします！

[rena_168]

inputにはA1が代入されている前提です。

[rena_168]

table.innerTextがundefineでエラーになったと思いますが、なぜundefineでしょうか？

[rena_168]

すみません、解決できました！

Answer 3

document.getElementById("A1")がtableタグを指しておりません。
直接tableタグを指定して下さい。

Comments

[rena_168]

そうですね、tableにIDがなくて直接指定できなくて、その親のDIVのIDで取得してからtableを参照しないといけないです。