HTML面板出現/消失取決於數據表選擇

Question

我現在使用datatables響應/選擇顯示一些數據。我怎樣才能做到這一點，當我點擊表格中的任何一行時，它會打開「col-md-6」面板？在未選擇行時隱藏，當選擇一行時顯示。

<!-- begin row --> 
<div class="row"> 
    <!-- begin col-2 --> 
    <div class="col-md-2"> 
     <div id="menu-panel"></div> 
     <!-- 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">Digital Inputs</h4> 
      </div> 
      <div class="alert alert-info fade in"> 
       <button type="button" class="close" data-dismiss="alert"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       Click on a Digital Input to edit its properties. 
      </div> 
      <div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Input</th> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="gradeA"> 
          <td>1</td> 
          <td>Digital Input 1</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>2</td> 
          <td>Digital Input 2</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>3</td> 
          <td>Digital Input 3</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>4</td> 
          <td>Digital Input 4</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>5</td> 
          <td>Digital Input 5</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>6</td> 
          <td>Digital Input 6</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>7</td> 
          <td>Digital Input 7</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>8</td> 
          <td>Digital Input 8</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>9</td> 
          <td>Digital Input 9</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>10</td> 
          <td>Digital Input 10</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>11</td> 
          <td>Digital Input 11</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>12</td> 
          <td>Digital Input 12</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>13</td> 
          <td>Digital Input 13</td> 
         </tr> 
         <tr class="gradeA"> 
          <td>14</td> 
          <td>Digital Input 14</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">New RTU FZB-1000 - FZB-1000</h4> 
      </div> 
      <div class="panel-body"> 
       <form class="form-horizontal" action="/" method="POST"> 
       <legend>Digital Input Basic Settings</legend> 
        <div class="form-group"> 
         <label class="col-md-4 control-label">Digital Input:</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">Display Input:</label> 
          <div class="col-md-2"> 
           <input type="checkbox" name="" value="" checked><br> 
          </div> 
        </div> 
        <div class="form-group"> 
          <label class="col-md-4 control-label">Signal Name:</label> 
          <div class="col-md-8"> 
           <input type="device" class="form-control" value="Digital Input 1" /> 
          </div> 
         </div> 
      </div> 
     </div> 
     <!-- end panel --> 
     <div class="col-md-8 col-md-offset-4"> 
      <button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button> 
      <button type="submit" class="btn btn-sm btn-default">Cancel</button> 
     </div> 
    </div> 
    <!-- end col-10 --> 

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

App.restartGlobalFunction(); 
App.setPageTitle('Color Admin | Managed Tables - Select'); 
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() { 
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() { 
    $.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() { 
     $.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() { 
      $.getScript('assets/js/table-manage-select.demo.min.js').done(function() { 
       TableManageTableSelect.init(); 
      }); 
     }); 
    }); 
}); 
}); 

Answer 1

你可以做這樣的事情..給你的輸入域ID例如 數字輸入：id="digital-input-number"和數字信號id="digital-input-name"和這裏不用代碼...

$('.gradeA td').on('click',function(){ 
       var text=[]; 
       text = $(this).parent().find('td'); 
        //console.log(text[0].innerText); 
        // console.log(text[1].innerText); 
       $("#digital-input-number").val(text[0].innerText); 
       $("#digital-input-name").val(text[1].innerText); 


      }); 

這個代碼將會把價值你的表的動態形式，即你點擊該行的一行數據去我想你想看到的形式。

Answer 2

我看不出有任何JS，你應該嘗試這個自己。我可以說的是，爲了得到你需要的東西，你將不得不調用輸入，並根據在表上選擇的列，將這些值與選擇的值相等。

因此，如果您單擊Digital Input 1，請將Digital Input的值設置爲所選行但第一列。它將顯示值1。

然後，您只需將所選列的值調用至signal name，它將顯示Digital Input 1。

沒有您的元素有id tags。 爲了做到這一點，你的行和列將需要有id tags。然後你可以很容易地使用JS抓住id的innerHTML。

我希望這會有所幫助。