如何在加载时自动“单击” DataTable中的第一行

如何解决如何在加载时自动“单击” DataTable中的第一行

我有一个要向其中加载sql数据的Jquery DataTable，它显示此数据的X行，然后可以单击DataTable上的一行，然后使用Jquery在用户屏幕上填充输入。现在，我希望能够使DataTable在加载时自动在第一行上“单击”，以便它可以使用第一个值（较少的人为干预）填充这些输入。

下面的代码：

<h1>My Table</h1>

<style>
  #myTable tr {
    cursor: pointer;
  }

  #myTable {
      width: 100px;
  }

  #myTable tbody tr:hover {
    background: #d7d7d7 !important;
  }

  #myTable td {
    background: transparent !important;
      width: 100px;
  }

  #myTable {
    margin-top: 6px;
  }

  #myTable_paginate .prevIoUs,#myTable_paginate .next {
    padding: 2px 4px;
    margin: auto 10px;
  }
  
</style>
<table id="myTable"></table>


<script>
  (() => {
    return true;
  })();

  function convertmyTableData(jsonData = {data: [{'none': ''}]}) {
    const mapped = [];

    const keys = [];
    Object.keys(jsonData.data[0]).forEach(key => keys.push({'title': key}));

    for (let option of jsonData.data) {

      const mappedOption = [];
      for (let key of Object.keys(option)) {
        if (option[key]) {
          mappedOption.push(option[key]);
        }
      }
      if (mappedOption.length > 0) {
        mapped.push(mappedOption);
      }
    }

    $('#myTable').dataTable({
      data: mapped,columns: keys,"aoColumnDefs": [{
        "sTitle": "Test","aTargets": ["myTable_records"]
      },{
        "aTargets": [0],"bSortable": true,"mRender": function (value,type,full) {
          return value;
        }
      }]
    });

      $('#myTable').dataTable( {
          "autoWidth": true
      } );



    const clickRow = function (e) {
      var el = $('#myTable').dataTable();
      var iPos = el.fnGetPosition(this);
      var aData = el.fnGetData(iPos);

        $('#Input_1').val(aData[0]);
        $('#Input_2').val(aData[1]);
   
    }

    $("#myTable").on("click","tr",clickRow);

      $('#myTable').dataTable( {
          "autoWidth": true
      } );
  }



  function myTableLookup() {
    let ID = '2343242';

    fetch(`/spr/custom/ID/json/${ID}?myParameter=hello`)
    .then(response => {
      console.log(response.ok);
          return response.json();

    }).then(jsonData => {
          console.log(jsonData);
      convertmyTableData(jsonData);

    }).catch(err => {
      console.warn('Error!',err);
    });
  }

  myTableLookup();
</script>

$（“＃myTable”）。on（“ click”，“ tr”，clickRow）; -用于当我单击任何给定行时，它获取值并在屏幕上填充必填字段。

我希望这种情况在加载时自动发生，并且仅出现在第一行[0]。

谢谢。

解决方法

使用此代码

$("#myTable>tbody>tr:first").trigger('click');

或尝试通过setTimout

延迟单击

setTimeout(function(){ $("#myTable>tbody>tr:first").trigger('click'); },3000);

,

我认为您应该使用focus（）方法。

$( document ).ready(function() {
    $("#myTable").focus();
    //or document.getElementById("myTable").focus();
   });