Как установить значение для ввода типа текста в таблице заголовков? - PullRequest
0 голосов
/ 14 января 2019

Я пытаюсь установить значение для заголовка <th></th>, где тип ввода - текст. Ниже мой jquery, который должен поставить ценность в моем th.

Вот мой формат таблицы.

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

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Попробуйте использовать .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>
0 голосов
/ 14 января 2019

Вы связали вышеупомянутую функцию, чтобы щелкнуть событие $("#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...