表テーブルの行選択時そのレコードの情報を表示する

表テーブルの行選択時に選択行の色を変えて且つその選択した行の情報を別画面に表示したいです。
自分で調べては見たのですがちんぷんかんぷんでお手上げです。
よろしくお願いします。。。

行動規範の内容に同意します

回答1件

ベストアンサー

選択した行の情報を別画面に表示したい

別画面の構成次第です。
別画面に関する部分のソースを表記下さい

なお、選択した行の構成要素も複数あるはずです。
それをどう表示したいかの仕様提示が必要になります。

たとえばこう

css
1.red{background-Color:red;}

javascript
1document.addEventListener('click',function(e){
2  var t=e.target;
3  if(t.nodeName=="TD"){
4    Array.prototype.map.call(t.parentNode.parentNode.children,function(x){
5      x.classList.remove('red');
6      if(x==t.parentNode){
7        x.classList.add('red');
8        var ch=x.children;
9        var content="";
10        content+="項目1:"+ch[0].textContent+"<br>";
11        content+="項目2:"+ch[1].textContent+"<br>";
12        content+="項目3:"+ch[2].textContent+"<br>";
13        content+="項目4:"+ch[3].textContent;
14        document.querySelector('#hoge').innerHTML=content;
15      }
16    });
17  }
18});
19

HTML
1<table>
2<tbody>
3<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
4<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
5<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
6</tbody>
7</table>
8<div id="hoge"></div>