Question

我正在尝试创建一些脚本来根据选择字段（级别）查找表格单元格的值，然后将该值乘以自由文本字段（小时）。得到一个总数。

我可以使用两个自由文本字段来处理这个问题，但我很难理解如何使用选择字段

这是基本表：

<table id="myTable">
  <thead>
    <th>Level</th>
    <th>Rates</th>

  </thead>
  <tbody>
    <tr>
      <td>level 1</td>
      <td>25</td>
    </tr>
    <tr>
      <td>level 2</td>
      <td>30</td>
    </tr>
    <tr>
      <td>level 3</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

然后是输入字段：

<input type="text" id="hours">
<select id="rates">
    <option>level 1</option>
    <option>level 2</option>
    <option>level 3</option>
   </select>
   <p>Total <span>zero</span></p>

然后这是我的剧本：

jQuery(document).ready(function($) {

        function search( key ) {
        return $('td')
          .filter(function() {
            return $(this).text() == key;
          })
          .closest('tr')
          .find('td')
          .eq(1)
          .text();
      }
      var rate = document.getElementById('rate');
        $(rate).on('click', function() {
        var value = search($(this).val()) || 'zero';
        var hours = document.getElementById('hours').value;
        var Total = parseInt(value)*parseInt(hours);
        $('p').find('span').text(Total);

      });
    });

虽然如果#rates是一个自由文本字段，我可以让这段代码工作，但我无法弄清楚如何让它在select字段上工作。

Answer 1

我猜你错过了＆＃39;选择ID的char。

var rate = document.getElementById('rate');

应该像

var rate = document.getElementById('rates');

并且您可以使用on（＆＃34;更改＆＃34;）而不是使用click事件，因此在更改值后您可以获得该值。

＆＃13;

var rate = document.getElementById('rates');
$(rate).on('change', function() {
  var value = search($(this).val()) || 'zero';
  var hours = document.getElementById('hours').value;
  var Total = parseInt(value)*parseInt(hours);
  $('p').find('span').text(Total);
});

＆＃13;

根据更改的查找值查找表格单元格

1 个答案: