How to set value to input type text in header table?

user_8917676 0
Viewed 1128

I'm trying to set value to header <th></th> where the input type is text. Below is my jquery that should put value in my th.

Here's my table format.

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

I already tried to hardcoded the value in:

th.val(sequence);

But still cannot show the value in <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);

});

When I remove the $('#tblCustomer').DataTable({"scrollX": true}); it works as expected.

<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>
datatables html jquery javascript
2 Answers

You have binded the above function to click event of $("#tblCustomer > tbody > tr") you you need to have tr inside your tbody and click on it.

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

If you want your code to be executed on load of the page then simply add your code inside 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>

user_57403820

Try to use .html to add text and html tags and add function to the update button using 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>
user_102586270
Related