英文:
How do I set focus on first column after selecting Reset button in javascript?
问题
I am working on a page that needs to be accessible through keyboard. Everything works fine but I am not sure how to set focus on the Name column (first dropdown) after I hit Filter Results button? I tried the following code but it doesn't work -
$(".dropdown1").focus();
Is there a way to set focus on span id? or what's the best way to achieve this? Thanks.
英文:
I am working on a page that needs to be accessible through keyboard. Everything works fine but I am not sure how to set focus on the Name column (first dropdwon) after I hit Filter Results button? I tired the following code but it doesn't work -
$(".dropdown1").focus();
Is there a way to set focus on spanid? or what's the best way to achieve this? Thanks.
Here is the link to my code - https://live.datatables.net/datubino/10/edit
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true,
columnDefs: [{
target: 6,
visible: false,
searchable: true,
}],
dom: 'ilfrt<"left-col"B><"toolbar"><"right-col"p>',
fnInitComplete: function() {
$('div.toolbar').html('<p>Custom tool bar!</p>');
},
buttons: [{
extend: 'excelHtml5',
className: 'mybutton',
exportOptions: {
columns: ':visible'
}
},
// 'colvis'
],
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
$('#myInput').on('keyup', function() {
table.search(this.value).draw();
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
$(".dropdown1").focus();
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select><option value="">select me</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
if (column.index() === 0) {
var filteredNames = column.data().unique().toArray();
['Garrett', 'Test1', 'Ashton'].forEach((d) => {
if (filteredNames.includes(d)) {
select.append('<option value="' + d + '">' + d + '</option>');
}
});
} else {
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// ** MY CHANGE **
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name:
<span id="dropdown1">
</span>
</p>
<p>Postion: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="myInput">Filter</button>
<button type="button" id="test">Reset</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
<th>&#160;</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Hidden Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>test</td>
<td>test3</td>
<td>test4</td>
<td>2011/04/25</td>
<td>$3,120</td>
<td>Sys Architect</td>
</tr>
<tr>
<td>Garrett</td>
<td>Director: fgghghjhjhjhkjkj</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
<td>Director:</td>
</tr>
<tr>
<td>Ashton</td>
<td>Technical Authorjkjkjk fdfd h gjjjhjhk</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
<td>Tech author</td>
</tr>
</tr>
</tbody>
</table>
</div>
<!-- end snippet -->
答案1
得分: 1
使用#代替.来定位一个ID，并使用子组合器(>)来获取<span>内部的<select>元素。
$("#dropdown1 > select").focus();
英文:
Use # instead of . to target an id and use the child combinator (>) to get the <select> element inside that <span>.
$("#dropdown1 > select").focus();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论