HTMLテーブルで行からデータを取得して別の場所に表示する

テーブルの行をクリックすると、その行をクリックするとそのデータが他のパネルに表示されます。だから、最初の行をクリックすると、表のNumberが他のパネルの「読み値」の下の数字を塗りつぶします。テーブルの名前と同様に、「読み値」の下の「名前」フィールドに記入してください。これをどうやってやりますか？そこHTMLテーブルで行からデータを取得して別の場所に表示する

<!-- begin row --> 
<div class="row"> 
    <!-- begin col-2 --> 
    <div class="col-md-2"> 
     <!-- begin panel --> 
     <div class="panel panel-inverse"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Table</h4> 
      </div> 
      <div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Number</th> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="gradeA"> 
          <td>1</td> 
          <td>First</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>2</td> 
          <td>Second</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>3</td> 
          <td>Third</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>4</td> 
          <td>Fourth</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- end panel --> 
    </div> 


    <!-- begin col-2 --> 
    <div class="col-md-6"> 
     <!-- begin panel --> 
     <div class="panel panel-inverse" data-sortable-id="form-stuff-2"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Form</h4> 
      </div> 
      <div class="panel-body"> 
       <form class="form-horizontal" action="/" method="POST"> 
       <legend>Readings</legend> 
        <div class="form-group"> 
         <label class="col-md-4 control-label">Number:</label> 
         <div class="col-md-8"> 
          <input type="text" class="form-control" placeholder="1" disabled /> 
         </div> 
        </div> 
        <div class="form-group"> 
          <label class="col-md-4 control-label">Name:</label> 
          <div class="col-md-8"> 
           <input type="device" class="form-control" value="Name here" /> 
          </div> 
         </div> 
      </div> 
     </div> 
     <!-- end panel --> 
    </div> 
    <!-- end col-10 --> 


</div> 
<!-- end row -->

出典

2017-06-09 J. Doe43

あなたはバニラJavascriptを（これを扱うことができるデータ・バインディングのライブラリがある）で、PAL

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

</head> 
<body> 
<!-- begin row --> 
<div class="row"> 
    <!-- begin col-2 --> 
    <div class="col-md-2"> 
     <!-- begin panel --> 
     <div class="panel panel-inverse"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Table</h4> 
      </div> 
      <div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Number</th> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="gradeA"> 
          <td>1</td> 
          <td>First</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>2</td> 
          <td>Second</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>3</td> 
          <td>Third</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>4</td> 
          <td>Fourth</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- end panel --> 
    </div> 


    <!-- begin col-2 --> 
    <div class="col-md-6"> 
     <!-- begin panel --> 
     <div class="panel panel-inverse" data-sortable-id="form-stuff-2"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Form</h4> 
      </div> 
      <div class="panel-body"> 
       <form class="form-horizontal" action="/" method="POST"> 
       <legend>Readings</legend> 
        <div class="form-group"> 
         <label class="col-md-4 control-label">Number:</label> 
         <div class="col-md-8"> 
          <input 
            type="text" 
            id="numberInput" 
            class="form-control" 
            placeholder="Number" 
            disabled /> 
         </div> 
        </div> 
        <div class="form-group"> 
          <label class="col-md-4 control-label">Name:</label> 
          <div class="col-md-8"> 
           <input 
             type="text" 
             id="deviceInput" 
             class="form-control"  
             value="Name here" /> 
          </div> 
         </div> 
      </div> 
     </div> 
     <!-- end panel --> 
    </div> 
    <!-- end col-10 --> 


</div> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<!-- end row --> 
<script> 
(function() { 

    var table = document.querySelector('#data-table'); 
    var number = document.querySelector('#numberInput'); 
    var device = document.querySelector('#deviceInput'); 

    table.addEventListener('click', onTableClick); 

    function onTableClick (e) { 
    //console.log(e.currentTarget); 
    var tr = e.target.parentElement; 
    //console.log(tr.children); 

    var data = []; 
    for (var td of tr.children) { 
     data.push(td.innerHTML) 
    } 

    number.value = data[0]; 
    device.value = data[1]; 

    } 
})(); 
</script> 
</body> 
</html>

出典

2017-06-09 21:08:44 AngelSalazar

ありがとうございます！これは魅力的に機能しました！ –

トピックはありませんが、「col-md-6」パネルをデフォルトで非表示にする方法を知っていたら、テーブルの行を選択するとパネル/フォームが表示されますか？ –

を行って、テーブルの行は、クリックイベントを持っています。したがって、そのクリックイベントを処理する関数を作成することができます。

HTML要素のonclick属性またはaddEventListenerメソッドを使用できます。関数への入力を明示的に記述したり、関数を計算することができます。関数名がupdateOtherであれば、updateOther（1、 'First'）またはupdateOther（this）を実行できます。後者はクリックされた行要素を渡し、関連する情報を抽出することができます。

出典

2017-06-09 21:11:35

$(document).ready(function(){ 
     $(".gradeA").click(function(){ 
      var currentRow = this; 
      var number = $(this).find("td")[0].innerText; 
      var name = $(this).find("td")[1].innerText; 
      $("form input[type='text']").val(number); 
      $("form input[type='device']").val(name); 
     }) 
    });

出典

2017-06-09 21:15:23

HTMLテーブルで行からデータを取得して別の場所に表示する

答えて

関連する問題