[英]How do I change the style of an “<input>” element dynamically using Javascript?
我正在開發一個應用程序，該應用程序的左側有2個表，右側有1行，當用戶選擇任何數字時，在表上，值會動態添加到右側的行中。
這按預期工作，但我嘗試添加CSS，如果用戶將鼠標懸停在行的輸入（右側）上，它將變為綠色，並且表格背景色上的相應值/ td立即變為綠色。
這是我的嘗試：
// window.onload = function () { alert("Js working!") }; let currentInput = 1; let bonusInput = 1; $("#table1").on('click', function(event) { let num = event.target.textContent; $("#inp" + currentInput++).attr("value", num); }); // bonus input: $("#table2").on('click', function(event) { let bon = event.target.textContent; $("#bonus" + bonusInput++).attr("value", bon); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Table on the left --> <div style="width: 140px; float: left;"> <table id="table1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!--2nd table--> <div style="width: 140px; float: left; margin-left: 12px;"> <table id="table2"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!-- Input values to populate dynamically--> <div style="width: 600px; float: right;"> <div> <input type="text" size="4" id="inp1" value=""> <input type="text" size="4" id="inp2" value=""> <input type="text" size="4" id="inp3" value=""> <input type="text" size="4" id="inp4" value=""> <input type="text" size="4" id="inp5" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus1" value=""> </div> <div style="margin-top: 5px;"> <input type="text" size="4" id="inp7" value=""> <input type="text" size="4" id="inp8" value=""> <input type="text" size="4" id="inp9" value=""> <input type="text" size="4" id="inp10" value=""> <input type="text" size="4" id="inp11" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus2" value=""> </div> </div>
這是結果的屏幕截圖：
您可以改用JavaScript：
// window.onload = function () { alert("Js working!") }; let currentInput = 1; let bonusInput = 1; $("#table1").on('click', function(event) { let num = event.target.textContent; $("#inp" + currentInput++).attr("value", num); }); //Bonus input $("#table2").on('click', function(event) { let bon = event.target.textContent; $("#bonus" + bonusInput++).attr("value", bon); }); $('#result input').hover(function() { var key = parseInt(this.id.replace(/(inp|bonus)/gm, ''), 10); var dir = this.id.indexOf('bonus') >= 0 ? '1' : '2'; var row = (key > 6 || this.id == 'bonus2') ? 1 : 0; var col = key % 6; $('td').attr('style', ''); $('input').attr('style', ''); var table = '1'; if (dir == 1) table = '2'; var compare_key = this.value; $('#table' + table + ' td').each(function() { if (this.innerText.trim() == compare_key) { $(this).css('background-color', 'green').css('color', 'white'); } }); $(this).css('background-color', 'green').css('color', 'white'); });
* { font-size: 15px; } td { text-align: center; border: 2px solid red; line-height: 3.5rem; width: 200px; cursor: pointer; } td:hover { background-color: green; color: white; } #table1 td {}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Draggable Bootstrap nav-tabs with jQuery UI</title> <meta name="description" content="Draggable Bootstrap nav-tabs with jQuery UI"> <!-- include bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <!--Table on the left --> <div style="width: 140px; float: left;"> <table id="table1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!--2nd table--> <div style="width: 140px; float: left; margin-left: 12px;"> <table id="table2"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!-- Input values to populate dynamically--> <div id="result" style="width: 600px; float: right;"> <div> <input type="text" size="4" id="inp1" value=""> <input type="text" size="4" id="inp2" value=""> <input type="text" size="4" id="inp3" value=""> <input type="text" size="4" id="inp4" value=""> <input type="text" size="4" id="inp5" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus1" value=""> </div> <div style="margin-top: 5px;"> <input type="text" size="4" id="inp7" value=""> <input type="text" size="4" id="inp8" value=""> <input type="text" size="4" id="inp9" value=""> <input type="text" size="4" id="inp10" value=""> <input type="text" size="4" id="inp11" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus2" value=""> </div> </div> <!-- include jQuery --> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- include jQuery UI --> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <!-- include bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
我相信有更有效的方法可以做到這一點。 我剛剛上過課。 您可以嘗試代碼段。
// window.onload = function () { alert("Js working!") }; let currentInput = 1; let bonusInput = 1; $("#table1").on('click', function(event) { let num = event.target.textContent; $("#inp" + currentInput++).attr("value", num); }); //Bonus input $("#table2").on('click', function(event) { let bon = event.target.textContent; $("#bonus" + bonusInput++).attr("value", bon); }); $(".leftCell").mouseover(function() { var val = $(this).val(); if (val != "") { var cell = $('#table1').find('.' + val) cell.css("background-color", "green") } }); $(".leftCell").mouseout(function() { var val = $(this).val(); if (val != "") { var cell = $('#table1').find('.' + val) cell.css("background-color", "white") } }); $(".rightCell").mouseover(function() { var val = $(this).val(); if (val != "") { var cell = $('#table2').find('.' + val) cell.css("background-color", "green") } }); $(".rightCell").mouseout(function() { var val = $(this).val(); if (val != "") { var cell = $('#table2').find('.' + val) cell.css("background-color", "white") } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="width: 140px; float: left;"> <table id="table1"> <tbody> <tr> <td class="1">1</td> <td class="2">2</td> </tr> <tr> <td class="3">3</td> <td class="4">4</td> </tr> <tr> <td class="5">5</td> <td class="6">6</td> </tr> <tr> <td class="7">7</td> <td class="8">8</td> </tr> <tr> <td class="9">9</td> <td class="10">10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!--2nd table--> <div style="width: 140px; float: left; margin-left: 12px;"> <table id="table2"> <tbody> <tr> <td class="1">1</td> <td class="2">2</td> </tr> <tr> <td class="3">3</td> <td class="4">4</td> </tr> <tr> <td class="5">5</td> <td class="6">6</td> </tr> <tr> <td class="7">7</td> <td class="8">8</td> </tr> <tr> <td class="9">9</td> <td class="10">10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!-- Input values to populate dynamically--> <div style="width: 600px; float: right;"> <div> <input type="text" class="leftCell" size="4" id="inp1" value=""> <input type="text" class="leftCell" size="4" id="inp2" value=""> <input type="text" class="leftCell" size="4" id="inp3" value=""> <input type="text" class="leftCell" size="4" id="inp4" value=""> <input type="text" class="leftCell" size="4" id="inp5" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus1" class="rightCell" value=""> </div> <div style="margin-top: 5px;"> <input type="text" class="leftCell" size="4" id="inp7" value=""> <input type="text" class="leftCell" size="4" id="inp8" value=""> <input type="text" class="leftCell" size="4" id="inp9" value=""> <input type="text" class="leftCell" size="4" id="inp10" value=""> <input type="text" class="leftCell" size="4" id="inp11" value=""> + <input style="margin-left: 20px;" type="text" size="4" id="bonus2" class="rightCell" value=""> </div> </div>
使用JavaScript，如何根據另一個元素的CSS樣式更改一個元素的CSS樣式？
[英]Using JavaScript, how do I change the CSS style of one element based on the CSS style of another element?
如何更改內部元素的樣式<div />用 JavaScript？
[英]How do I change the style of an element inside a <div /> with JavaScript?
如何使用 JavaScript 或 JQuery 在頁面加載時更改 Div 元素的樣式寬度？
[英]How do I change Style Width of Div Element on Page load using JavaScript or JQuery?
如何將樣式元素添加到div並使用javascript將其刪除
[英]How do I add a style element to a div and remove it using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.