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

在你的dom元素为你想要实现的场景做好准备之后，应该调用click或trigger之类的方法。

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

现在，请考虑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)，这样你就不必费心去模仿点击或黑客了。

1.从$('th.sort').click()中提取排序语句，并将它们放在如下定义的函数中：

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（），如果你想要那个动作

模仿鼠标单击

3 个答案: