Bắt chước nhấp chuột

Question

Tôi cần bắt chước nhấp chuột vào "Tên" td sau khi vẽ bảng, vì vậy có vẻ như sắp xếp theo tên là mặc định.

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>

Những điều như .trigger("click") hoặc element.click() không làm việc ở tất cả.

Answer 1

Vì bạn đang không sử dụng sự kiện nhấp chuột, bạn chỉ có thể di chuyển các chức năng đi mẫu .click()

function clickHandler(){...} 

.click(clickHandler) 

sau đó bạn chỉ có thể gọi clickHandler() nếu bạn muốn hành động mà

Answer 2

Các cuộc gọi đến các phương thức như click hoặc trigger phải được thực hiện sau khi các phần tử dom của bạn sẵn sàng cho mục đích của kịch bản mà bạn muốn đạt được.

nếu trường hợp của bạn, bạn đang cố gắng sắp xếp chúng trước khi các phần tử được tải đầy đủ vào trang, vì vậy bất kỳ giải pháp nào bạn sẽ thử, nó sẽ không hoạt động vì chúng tôi thiếu thứ gì đó ở đây.

Bây giờ, hãy xem xét phiên bản sửa đổi này của chức năng getJson của bạn:

$.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(); 
    }); 

Đừng lo lắng về default lớp này bên trong bộ chọn jQuery, nó được mô tả xuống dưới :)

đây là cách tiếp cận của tôi để làm cho nó hoạt động:

1- Tôi đã đánh dấu mặc định th mà bạn cần phải sắp xếp ban đầu bằng một lớp bổ sung (có tên mặc định)

2- Tôi đã sau đó thêm một cuộc gọi đến mô phỏng các hành động nhấp sau dữ liệu được nạp (sử dụng một selector với lớp mặc định vào tài khoản)

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

và đây là một liên kết đến làm việc hoàn chỉnh fiddle: https://jsfiddle.net/hakeero/rfeh0q7v/1/

Answer 3

Bạn nên tạo một hàm sort(th) mà bạn có thể gọi từ bất cứ đâu để bạn không cần phải bận tâm bắt chước bấm hoặc hack như thế.

1.extract những điều khoản loại từ $('th.sort').click(), và đặt chúng trong một chức năng được xác định như sau:

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.sorting theo tên

$.getJSON(link, function (data) { 

    ... 

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

3.change $('th.sort').click() cho phù hợp.

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

thuận tiện cho bạn, live demo click here