html table中的单元格的跳动方向设置_html/css_WEB-ITnose
<table><tr><td ><input type="text" style="width:60px;background-color: #FFFF99"/></td><td><input type="text" style="width:60px;background-color: #FFFF99"/></td><td ><input type="text" style="width:60px;background-color: #FFFF99"/></td></tr><tr><td ><input type="text" style="width:60px;background-color: #FFFF99"/></td><td><input type="text" style="width:60px;background-color: #FFFF99"/></td><td ><input type="text" style="width:60px;background-color: #FFFF99"/></td></tr><tr><td ><input type="text" style="width:60px;background-color: #FFFF99"/></td><td><input type="text" style="width:60px;background-color: #FFFF99"/></td><td><input type="text" style="width:60px;background-color: #FFFF99"/></td></tr></table>
按TAB键在input里的方向向右跳到下个input里。。。我想弄成向下移动。。。请问如何实现呢！！谢谢了！！
回复讨论(解决方案)
用tableindex属性值试试
用tableindex属性值试试
对。按照想跳转的顺序，在INPUT标签里加上tableindex属性，值从小到大。
引用 1 楼 zsx841021 的回复:
用tableindex属性值试试
对。按照想跳转的顺序，在INPUT标签里加上tableindex属性，值从小到大。
可以是可以。。。不过很多的时候一个个地添加。。。会累死人的！！
有没有偷懒的方法
document.onkeydown = function (e) { var srcElement = samsung.dsem.utility.getSrcElement(e); var currKey = samsung.dsem.utility.getKeyCode(e); var keyName = ""; switch (currKey) { case 8: keyName = "[退格]"; if (srcElement != null) { if (srcElement.tagName != undefined && (srcElement.tagName == "input" || srcElement.type == "text" || srcElement.type == "textarea")) { if (srcElement.readOnly != true || srcElement.disabled != "disabled") { return true; } } } return false; break; case 9: keyName = "[制表(Tab)]"; var cur_tr = srcElement.parentNode.parentNode; var cur_td_index = srcElement.parentNode.cellIndex; if (cur_td_index!=null&&cur_td_index == (cur_tr.cells.length - 1)) { var next_tr; if (cur_tr.tagName != undefined && cur_tr.tagName.toLowerCase() == "tr") { next_tr = samsung.dsem.utility.getNextSibling(cur_tr); if (next_tr != null) { //try { next_tr.cells[cur_td_index].childNodes[0].focus(); /*next_tr.click();*/ } catch (e) { } try { next_tr.cells[1].childNodes[0].focus(); /*next_tr.click();*/ } catch (e) { } } return false; } } break; case 13: keyName = "[回车]";// if (srcElement != null) {// if (srcElement.tagName != undefined && (srcElement.tagName == "input" || srcElement.type == "text" || srcElement.type == "textarea")) {// if (srcElement.readOnly != true || srcElement.disabled != "disabled") {// return true;// }// }// }// return false;// break; var cur_tr = srcElement.parentNode.parentNode; var cur_td_index = srcElement.parentNode.cellIndex; var next_tr; if (cur_tr.tagName != undefined && cur_tr.tagName.toLowerCase() == "tr") { next_tr = samsung.dsem.utility.getNextSibling(cur_tr); if (next_tr != null) { try { next_tr.cells[cur_td_index].childNodes[0].focus(); /*next_tr.click();*/ } catch (e) { } } return false; } break; case 32: keyName = "[空格]"; break; case 33: keyName = "[PageUp]"; break; case 34: keyName = "[PageDown]"; break; case 35: keyName = "[End]"; break; case 36: keyName = "[Home]"; break; case 37: keyName = "[方向键左]"; var cur_tr = srcElement.parentNode.parentNode; var cur_td = srcElement.parentNode; if (cur_td.tagName != undefined && cur_td.tagName.toLowerCase() == "td") { for (var i = 0; i < cur_tr.cells.length; i++) { if (i > 1) { if (cur_td == cur_tr.cells[i]) { if (cur_tr.cells[i - 1].childNodes[0].disabled != "disabled") { cur_tr.cells[i - 1].childNodes[0].focus(); if (cur_tr.cells[i - 1].childNodes[0].tagName.toLowerCase() != "select") { cur_tr.cells[i - 1].childNodes[0].select(); } //cur_tr.click(); break; } } } } } break; case 38: keyName = "[方向键上]"; var cur_tr = srcElement.parentNode.parentNode; var cur_td_index = srcElement.parentNode.cellIndex; var prev_tr; if (cur_tr.tagName != undefined && cur_tr.tagName.toLowerCase() == "tr") { prev_tr = samsung.dsem.utility.getPreviousSibling(cur_tr); if (prev_tr != null) { try { prev_tr.cells[cur_td_index].childNodes[0].focus(); /*prev_tr.click();*/ } catch (e) { } } return false; } break; case 39: keyName = "[方向键右]"; var cur_tr = srcElement.parentNode.parentNode; var cur_td = srcElement.parentNode; if (cur_td.tagName != undefined && cur_td.tagName.toLowerCase() == "td") { for (var i = 0; i < cur_tr.cells.length; i++) { if (i < (cur_tr.cells.length - 1)) { if (cur_td == cur_tr.cells[i]) { if (cur_tr.cells[i + 1].childNodes[0].disabled == "disabled" || cur_tr.cells[i + 1].childNodes[0].disabled == true) { } else { cur_tr.cells[i + 1].childNodes[0].focus(); if (cur_tr.cells[i + 1].childNodes[0].tagName.toLowerCase() != "select") { cur_tr.cells[i + 1].childNodes[0].select(); } //cur_tr.click(); break; } } } } } break; case 40: keyName = "[方向键下]"; var cur_tr = srcElement.parentNode.parentNode; var cur_td_index = srcElement.parentNode.cellIndex; var next_tr; if (cur_tr.tagName != undefined && cur_tr.tagName.toLowerCase() == "tr") { next_tr = samsung.dsem.utility.getNextSibling(cur_tr); if (next_tr != null) { try { next_tr.cells[cur_td_index].childNodes[0].focus(); /*next_tr.click();*/ } catch (e) { } } return false; } break; case 46: keyName = "[删除]"; break; default: keyName = ""; break; } }
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1663
14
1420
52
1313
25
1266
29
1237
24
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
HTML, CSS, dan JavaScript: Alat penting untuk pemaju web
Apr 09, 2025 am 12:12 AM
HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku
Apr 18, 2025 am 12:09 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web
Apr 17, 2025 am 12:12 AM
Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web
Apr 19, 2025 am 12:02 AM
Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan
Apr 16, 2025 am 12:04 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
HTML: Membina struktur laman web
Apr 14, 2025 am 12:14 AM
HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
