electronでmysqlのデータをtableタグに一覧を表示するアプリを作成しています。
tableタグに表示したIDをクリックしてそのIDに関する情報を別のウインドウに表示したいです。
そこでgetElementsByClassNameでクラス名testをもつtdタグを取得したいのですが
javascript
1console.log(elements);
とするとコンソールに**HTMLCollection[4]**と表示されます。
しかし
javascript
1console.log(elements[0]); 2
とするとundefinedと表示されて取得できません。
変数のスコープが原因と思っているのですが解決できず質問させていただきました。
ご教授よろしくお願いします。
コードは下記の通りです。
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Sample</title> 6 <link href="./mystyle.css" rel="stylesheet" type="text/css"> 7</head> 8<body> 9 10<table id="testtable"> 11 12</table> 13 14 15<script type="text/javascript"> 16 //mysqltest 17let mysql = require('mysql'); 18let connection = mysql.createConnection({ 19 host : 'localhost', 20 user : 'root', 21 password : 'admin', 22 database : 'mysample' 23}); 24connection.connect(); 25connection.query('SELECT * FROM person;', function(err, rows, fields) { 26 if (err) throw err; 27 28 var tb = document.getElementById('testtable'); 29 30 //tableの見出しの作成 31 var thead = document.createElement('thead'); 32 var tr_th = document.createElement('tr'); 33 tb.appendChild(thead); 34 thead.appendChild(tr_th); 35 for(var count_th = 0; count_th < fields.length; count_th ++){ 36 var th = document.createElement('th'); 37 tr_th.appendChild(th); 38 th.innerText = fields[count_th].name; 39 } 40 41 //tableの行作成 keyを変数にしたいので[]ブラケット演算子で処理している 42 var tbody = document.createElement('tbody'); 43 tb.appendChild(tbody); 44 for (var count_row = 0; count_row < rows.length; count_row ++){ 45 var tr_td = document.createElement('tr'); 46 tbody.appendChild(tr_td); 47 for (var count_col = 0; count_col < fields.length; count_col ++){ 48 var td = document.createElement('td'); 49 tr_td.appendChild(td); 50 var col_name = fields[count_col].name; 51 td.innerText = rows[count_row][col_name]; 52 if (count_col == 0){ 53 td.classList.add('test'); 54 } 55 } 56 } 57}); 58 59connection.end(); 60 61var elements = document.getElementsByClassName('test'); 62console.log(elements); 63console.log(elements[0]); 64 65 66</script> 67</body> 68 69</html> 70
回答1件
あなたの回答
tips
プレビュー