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

jQuery事件 - 单击时将表行复制到HTML输入

1 个答案: