Question

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

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

以下是结果的屏幕截图：

Answer 1

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

Answer 2

我敢肯定有更有效的方法可以做到这一点。我刚刚上过课。您可以尝试代码段。

// 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动态更改“ <input />”元素的样式？

2 个答案: