模拟鼠标点击

Question

我需要在绘制表格后模仿鼠标点击" name“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-我已经用一个额外的类(名为th )标记了您最初需要排序的默认类

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

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

这里有一个完整的实用工具的链接：https://jsfiddle.net/hakeero/rfeh0q7v/1/

Answer 2

你应该创建一个 sort(th) 的函数，你可以从任何地方调用它，这样你就不需要费心去模仿或者像那样的hacks了。

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

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

为了方便起见，live demo click here

Answer 3

由于您没有使用单击事件，因此只需将该函数从.click()

function clickHandler(){...}

.click(clickHandler)

然后，如果您希望执行该操作，则可以只调用clickHandler()