Question

我正在尝试将值设置为标题<th></th>，其中输入类型为文本。下面是我的jQuery，应该在我的东西中赋予价值。

这是我的表格格式。

<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

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

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

如果您希望代码在页面加载时执行，则只需将代码添加到文档就绪中即可

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

Answer 2

尝试使用.html添加文本和html标签，并使用jquery将功能添加到更新按钮。

html：

 <input type="button" class="btn btn-default" value="Update" id='update' />

<table id="tblCustomer" class="display" style="width:100%"> 
   <td =id='tdId'></td>
</table>


for example:
<script>
  $(document).ready( function ()
    {
        $('#update').click(function(){
            $Imp_Sequence = $('input[name="Import_Sequence"]').val();
            $("#tblCustomer #tdId").html("<p>" + $Imp_Sequence + "</p>")
        })
    })
</script>

如何设置标题表中输入文字的值？

2 个答案: