jQuery Events - Copy Table row to HTML input when click

Question

Good day everyone!

I use this link as a reference DOM / jQuery events by datatables.net

I want is when I click my populated table all the data on it will transfer to HTML input tag. How can I do this?

here's my code:

$(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>

@TahaPaksu yes like on the sample in datatables.net but they use alert just to show that their code is working. — Mark
– Mark, Commented Feb 22, 2017 at 8:56

Taha Paksu · Accepted Answer · 2017-02-22 08:56:32Z

1

You were close. Try this:

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

answered Feb 22, 2017 at 8:56

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Hi, your code is working but when I use your sample of input tag but when I use mine the Middlename, Course and Year Level is empty. I will edit my code and I will add my input tag.

Taha Paksu Over a year ago

Change the id of the javascript to match your input tag.

Mark Over a year ago

what a shame my bad... It's working now... thanks for the help! :)

Collectives™ on Stack Overflow

jQuery Events - Copy Table row to HTML input when click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related