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" />