时间戳

首页 > 解决方案 > 如何更改“" 元素动态使用 Javascript？

javascript - 如何更改“" 元素动态使用 Javascript？

问题描述

我正在开发一个应用程序，该应用程序左侧有 2 个表格，右侧有一行，当用户选择任何数字时，表格上的值会动态添加到右侧的行上。

这可以按预期工作，但我正在尝试添加 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>

这是结果的屏幕截图：

图片截图

标签： javascripthtmlcsshtml-table

解决方案

您可以改用 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>

推荐阅读