jQuery事件 - 單擊時將表格行復制到HTML輸入

Question

大家好！

我使用這個鏈接作爲參考 DOM/jQuery events by datatables.net

我想要的是，當我點擊我的填充表中的所有系統上的數據將轉移到HTML輸入標籤。我怎樣才能做到這一點？

這裏是我的代碼：

$(document).ready(function() {    
 
    $('#offenseTable').dataTable({ 
 
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] 
 
    }); 
 

 
    var table = $('#offenseTable').DataTable(); 
 
    $('#offenseTable tbody').on('click', 'tr', function() { 
 
      var data = table.row(this).data(); 
 
      document.getElementById("offStudID").innerHTML = data[1]; 
 
      document.getElementById("offStudLN").innerHTML = data[2]; 
 
      document.getElementById("offStudFN").innerHTML = data[3]; 
 
      document.getElementById("offStudMN").innerHTML = data[4]; 
 
      document.getElementById("offStudCourse").innerHTML = data[5]; 
 
      document.getElementById("offStudLevel").innerHTML = data[6]; 
 
      // alert('You clicked on '+data[3]+'\'s row'); 
 
     }); 
 
});

<table class="table table-striped table-bordered table-hover" id="offenseTable"> 
 
    <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th>Student ID</th> 
 
      <th>Lastname</th> 
 
      <th>Firstname</th> 
 
      <th>Middlename</th> 
 
      <th>Course</th> 
 
      <th>Year Level</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="odd gradeX"> 
 
      <td>1</td> 
 
      <td>100001</td> 
 
      <td>Doe</td> 
 
      <td>John</td> 
 
      <td>none</td> 
 
      <td>BSMT</td> 
 
      <td>1ST</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

你接近。試試這個：

$(document).ready(function() {    
 
    $('#offenseTable').dataTable({ 
 
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] 
 
    }); 
 

 
    var table = $('#offenseTable').DataTable(); 
 
    $('#offenseTable tbody').on('click', 'tr', function() { 
 
      var data = table.row(this).data(); 
 
      document.getElementById("offStudID").value = data[1]; 
 
      document.getElementById("offStudLN").value = data[2]; 
 
      document.getElementById("offStudFN").value = data[3]; 
 
      document.getElementById("offStudMN").value = data[4]; 
 
      document.getElementById("offStudCourse").value = data[5]; 
 
      document.getElementById("offStudLevel").value = data[6]; 
 
      // alert('You clicked on '+data[3]+'\'s row'); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 
<table class="table table-striped table-bordered table-hover" id="offenseTable"> 
 
    <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th>Student ID</th> 
 
      <th>Lastname</th> 
 
      <th>Firstname</th> 
 
      <th>Middlename</th> 
 
      <th>Course</th> 
 
      <th>Year Level</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="odd gradeX"> 
 
      <td>1</td> 
 
      <td>100001</td> 
 
      <td>Doe</td> 
 
      <td>John</td> 
 
      <td>none</td> 
 
      <td>BSMT</td> 
 
      <td>1ST</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<input type="text" id="offStudID" /> 
 
<input type="text" id="offStudLN" /> 
 
<input type="text" id="offStudFN" /> 
 
<input type="text" id="offStudMN" /> 
 
<input type="text" id="offStudCourse" /> 
 
<input type="text" id="offStudLevel" />