如何在加載時自動“單擊”DataTable 中的第一行

Question

我有一個 Jquery 數據表，我將 SQL 數據加載到其中，這會顯示 X 行與這些數據，然后我可以單擊數據表上的一行，並使用 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]。

謝謝你。

Answer 1

使用此代碼

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

或嘗試使用setTimout延遲setTimout

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

Answer 2

我認為你應該使用 focus() 方法。

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