模拟鼠标点击

Question

在表格绘制完成后，我需要模拟鼠标点击“姓名”单元格，以便看起来默认按照姓名排序。

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()这样的东西根本不起作用。

- Nikita

---

为什么不在生成表之前对通过 JSON 接收到的数据进行排序呢？ - zerohero

难道不是因为页面没有加载完毕，导致 .trigger('click') 和 .click() 无法正常工作吗？尝试使用类似 setTimeout(function(){$('#defaultSort').click();}, 500); 的方法。哦，就像 zerohero 所说的那样，为什么不从排序后的状态开始呢？... - Martin M

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();

这里有一个完整的工作示例链接：https://jsfiddle.net/hakeero/rfeh0q7v/1/

- Mohammed Swillam

Answer 2

你应该创建一个名为sort(th)的函数，可以在任何地方调用它，这样你就不需要模拟点击或使用其他方法来排序。

从$('th.sort').click()中提取排序语句，并将其放入以下定义的函数中：

1.

function sort(th) {
    var table = $(th).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(th).index()))
    th.asc = !th.asc;
    if (!th.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
}

2.按名称排序

$.getJSON(link, function (data) {

    ...

    // sorting by name as the default action
    sort($("#defaultSort"));
});

3. 根据需要修改 $('th.sort').click()。

$('th.sort').click(function(){
   sort(this);
})

为了方便您，点击此处查看实时演示

- Jerry Chin

---

将代码从一个函数移动到另一个函数不会改变任何内容。 - Salman A

@SalmanA，在上述情况下，我与你的看法不同。给一个匿名函数命名将引入可重用性，而不仅仅是移动代码。 - Jerry Chin

Answer 3

由于您没有使用点击事件，因此可以将函数移出 .click()。

function clickHandler(){...}

.click(clickHandler)

如果您想执行该操作，只需调用clickHandler()即可。

- Mikiku