我正在尝试使用 tr keydown 事件制作一个键盘导航的 html 表格，问题是当我按下表格上的任意键时，keydown 事件没有被触发。
我试过用
onkeydown="method();"
和jquery
$("tr").keydown(function(event){});
但仍然没有触发 keydown 事件。
链接(nitinkabra.com/new_table)
下面是我已经完成的示例:
<head>
<script>
function keydwn() {
alert("herte");
}
</script>
<style>
.selected:focus{background-color:green}
.selected:hover{background-color:#fdfd02}
</style>
</head>
<body>
<div style="width:750px;max-width: 3200px;max-height:450px;overflow-y:hidden;overflow-x:scroll;">
<div style="width:750px;max-width: 3200px;">
<table class='default_table' style="table-layout: fixed; width: .3200px; overflow: visible;">
<thead>
<tr>
<th style="width: 300px">
Ledger Name
</th>
<th style="width: 150px">
Group
</th>
<th style="width: 300px">
Address 1
</th>
<th style="width: 300px">
Address 2
</th>
<th style="width: 120px">
Contact Person
</th>
<th style="width: 120px">
City
</th>
<th style="width: 120px">
State
</th>
<th style="width: 120px">
PIN
</th>
<th style="width: 150px">
Phone
</th>
<th style="width: 150px">
Mobile
</th>
<th style="width: 200px">
E-Mail
</th>
<th style="width: 120px">
TIN
</th>
<th style="width: 120px">
Area
</th>
<th style="width: 120px">
Remarks
</th>
<th style="width: 100px">
Opening
</th>
<th style="width: 120px">
Lock Credit Bill
</th>
<th style="width: 120px">
Limit on Amount
</th>
<th style="width: 100px">
Limit on Bill
</th>
<th style="width: 120px">
Limit Credit Days
</th>
</tr>
</thead>
</table>
</div>
<div style="width: 3405px;overflow-y:scroll;overflow-x:hidden; max-height:430px;">
<table id = "main_table" class='default_table' style="table-layout: fixed; width:100%;margin-top:-30px;">
<thead>
<tr>
<th style="width: 300px">
Ledger Name
</th>
<th style="width: 150px">
Group
</th>
<th style="width: 300px">
Address 1
</th>
<th style="width: 300px">
Address 2
</th>
<th style="width: 120px">
Contact Person
</th>
<th style="width: 120px">
City
</th>
<th style="width: 120px">
State
</th>
<th style="width: 120px">
PIN
</th>
<th style="width: 150px">
Phone
</th>
<th style="width: 150px">
Mobile
</th>
<th style="width: 200px">
E-Mail
</th>
<th style="width: 120px">
TIN
</th>
<th style="width: 120px">
Area
</th>
<th style="width: 120px">
Remarks
</th>
<th style="width: 100px">
Opening
</th>
<th style="width: 120px">
Lock Credit Bill
</th>
<th style="width: 120px">
Limit on Amount
</th>
<th style="width: 100px">
Limit on Bill
</th>
<th style="width: 120px">
Limit Credit Days
</th>
</tr>
</thead>
<tbody>
<tr id="0" class="selected" onkeydown="keydwn();">
<td style="width: 300px">
ABC India Pvt. Ltd.
</td>
<td style="width: 150px">
</td>
<td style="width: 300px">
ABC Add 1, Chennai
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
Chennai
</td>
<td style="width: 120px">
Chennai
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
abc@yahoo.com
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
5000.00
</td>
<td style="width: 120px">
1
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="1" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Abhilash Loan Ac
</td>
<td style="width: 150px">
Unsecured Loans
</td>
<td style="width: 300px">
215, M.G.ROAD, BANGA
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="2" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Abxd India Pvt Ltd
</td>
<td style="width: 150px">
Sundry Debtors
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="3" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Building
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="4" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Computer & Per.
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="5" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Furn. & Fixt.
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="6" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Motor Car
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="7" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on P & M - I
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
document.getElementById('0').focus();
</script>
</body>
</html>
最佳答案
TR 上不能有 keydown 事件，因为它不可聚焦。只有获得焦点的元素才有 key* 事件。因此，以这种方式更改您的代码:
<tr tabindex="0">
这样它就得到了焦点。现在，当您移动焦点时，通过使用 Tab 键或单击，所有 key* 事件都将被启用。
关于javascript - html 表 tr onkeydown 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16959133/
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
使用Ruby1.9.2运行IDE提示说需要gemruby-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall