javascript - 如何设置值以在标题表中输入类型文本？

Question

我正在尝试将值设置为 header <th></th>其中输入类型是文本。下面是我的 jquery，它应该为我的 th 赋予值(value)。

这是我的表格格式。

<table id="tblCustomer" class="display" style="width:100%"> 
    <thead>
        <tr>
            <th>
                <input type="button" class="btn btn-default" value="Update" />
            </th>
            <th>
                <input id="Import_Sequence" name="Import_Sequence" type="text" value="" />
            </th>
            <th>
                <input id="Line" name="Line" type="text" value="" />
            </th> 
         </tr>
         <tr>
             <th>     
             </th>
             <th data-toggle="tooltip" data-container="body" data-placement="top" title="">
                        Import_Sequence
             </th>
             <th data-toggle="tooltip" data-container="body" data-placement="top" title="Line number for reference.">
                        Line
             </th> 
          </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我已经尝试将值硬编码在:

th.val(sequence);

但还是无法显示<input id="Import_Sequence" name="Import_Sequence" type="text" value="" />中的值

$("#tblCustomer > tbody > tr").click(function (event) {
    var sequence = $(this).find("td:eq(1)").html();
    var line_no = $(this).find("td:eq(2)").html();

    var th = $('#tblCustomer thead tr').find("th:eq(1)");
    th = th.find('input[name="Import_Sequence"]');
    th.val(sequence);

});

当我删除 $('#tblCustomer').DataTable({"scrollX": true});它按预期工作。

<script>
    $(document).ready(function () {
        var tblCust = $('#tblCustomer').DataTable({
            "aLengthMenu": [[20, -1], [20, "All"]],
            iDisplayLength: 20,
            bScrollInfinite: true, //this property disables pagination
            "scrollCollapse": true,
            "pagingType": "simple_numbers",
            "lengthChange": false,
            "bInfo": false,
            "dom": 'lrtip',
            "scrollX": true,
            "autoWidth": true
        });

        tblCust.columns.adjust().draw();

        $("#tblCustomer > tbody > tr").click(function (event) {
            var sequence = $(this).find("td:eq(1)").html();
            var line_no = $(this).find("td:eq(2)").html();

            var th = $('#tblCustomer thead tr').find("th:eq(1)");
            th = th.find('input[name="Import_Sequence"]');
            th.val(sequence);

        });

    });
</script>

Answer 1

您已将上述函数绑定(bind)到 $("#tblCustomer > tbody > tr") 的单击事件，您需要在 tbody 中包含 tr 并点击它。

$(function () {
	$("#tblCustomer > tbody > tr").click(function (event) {
		var sequence = $(this).find("td:eq(1)").html();
		var line_no = $(this).find("td:eq(2)").html();
		var th = $('#tblCustomer thead tr').find("th:eq(1)");
		th = th.find('input[name="Import_Sequence"]');
		th.val(sequence);
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblCustomer" class="display" style="width:100%">
   <thead>
      <tr>
         <th>
            <input type="button" class="btn btn-default" value="Update" />
         </th>
         <th>
            <input id="Import_Sequence" name="Import_Sequence" type="text" value="" />
         </th>
         <th>
            <input id="Line" name="Line" type="text" value="" />
         </th>
      </tr>
      <tr>
         <th>
         </th>
         <th data-toggle="tooltip" data-container="body" data-placement="top" title="">
            Import_Sequence
         </th>
         <th data-toggle="tooltip" data-container="body" data-placement="top" title="Line number for reference.">
            Line
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            Td 1
         </td>
         <td>
            click here
         </td>
      </tr>
   </tbody>
</table>

如果您希望您的代码在页面加载时执行，那么只需将您的代码添加到 document ready 中

$(function() {
  var sequence = $(this).find("td:eq(1)").html();
	var line_no = $(this).find("td:eq(2)").html();
	var th = $('#tblCustomer thead tr').find("th:eq(1)");
	th = th.find('input[name="Import_Sequence"]');
	th.val(sequence);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblCustomer" class="display" style="width:100%">
   <thead>
      <tr>
         <th>
            <input type="button" class="btn btn-default" value="Update" />
         </th>
         <th>
            <input id="Import_Sequence" name="Import_Sequence" type="text" value="" />
         </th>
         <th>
            <input id="Line" name="Line" type="text" value="" />
         </th>
      </tr>
      <tr>
         <th>
         </th>
         <th data-toggle="tooltip" data-container="body" data-placement="top" title="">
            Import_Sequence
         </th>
         <th data-toggle="tooltip" data-container="body" data-placement="top" title="Line number for reference.">
            Line
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            Td 1
         </td>
         <td>
            copy its html
         </td>
      </tr>
   </tbody>
</table>