javascript - 模仿鼠标点击

Question

我需要在表格绘制后模仿鼠标点击“名称”td，所以看起来默认按名称排序。

var link = "https://jsonplaceholder.typicode.com/users";
var usersData = [];

$(".buttonLoad").click(function () {
  $(".buttonLoad").remove();
  $.getJSON(link, function (data) {
    usersData = data;
    // Table draw
    for(var i = 0; i < usersData.length; i++){
      $("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>"
                         + "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>"
                         + "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>"
                         + "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>"
                         + "<td>" + usersData[i].address.geo.lat + "</td>"
                         + "<td>" + usersData[i].phone + "</td>"
                         + "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>"
                         + "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>" )
    }
  });
  $("table").removeClass("hide");
  $('th.sort').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc;
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
  })
  function comparer(index) {
    return function(a, b) {
      var valA = getCellValue(a, index), valB = getCellValue(b, index)
      return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
    }
  }
  function getCellValue(row, index){ return $(row).children('td').eq(index).html() }
});

.hide{
    display: none;
}
button{
    margin: 3px;
}
table {
    width: 100%;
    margin: auto;
    margin: 3px;
}
table th {
    font-weight: bold;
}
table th, table td {
    padding: 3px;
    border: 1px solid #000;
}
thead th{
    font: bold italic 100% sans-serif;
    background-color: #f7e1b5;
}
.sort{
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<button class="buttonLoad">Load data</button>

<table id="users" border="1" class="hide">
  <thead>
    <tr>
      <th>ID</th>
      <th class="sort" id="defaultSort">Name</th>
      <th class="sort">Username</th>
      <th class="sort">Email</th>
      <th class="sort">Street</th>
      <th>Suite</th>
      <th>City</th>
      <th>Zipcode</th>
      <th>Geo</th>
      <th>Phone</th>
      <th>Website</th>
      <th class="sort">CompanyName</th>
      <th>CatchPhrase</th>
      <th>bs</th>
    </tr>
  </thead>

</table>

.trigger("click") 或 element.click() 之类的东西根本不起作用。

Answer 1

调用 click 或 trigger 等方法应该在您的 dom 元素准备好用于您想要实现的场景之后进行。

如果你的情况是，你试图在元素完全加载到页面中之前对它们进行排序，那么无论你尝试什么解决方案，它都不会奏效，因为我们遗漏了一些东西在这里。

现在，考虑一下您的 getJson 函数的这个修改版本:

  $.getJSON(link, function(data) {
    usersData = data;
    // Table draw
    for (var i = 0; i < usersData.length; i++) {
      $("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>" + "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>" + "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>" + "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>" + "<td>" + usersData[i].address.geo.lat + "</td>" + "<td>" + usersData[i].phone + "</td>" + "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>" + "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>")
    }
    // finished loading, now sort by name
    $(".sort.default").click();
  });

不要担心 jQuery 选择器中的这个 default 类，它在下面有描述:)

这是我实现它的方法:

1- 我已经用一个额外的类(命名为 default)标记了默认的 th ，你最初需要根据它进行排序

2- 然后我添加了一个调用来模拟点击操作之后加载数据(使用具有默认类的选择器)

// finished loading, now sort by name
        $(".sort.default").click();

这里是完整的工作 fiddle 的链接:https://jsfiddle.net/hakeero/rfeh0q7v/1/