Question

我正在学习jQuery并希望更改表td中的值。我有以下代码：

$(document).ready(function() {
  $('#s1').on('change', function() {
    $("#lev1,#lev2,#lev3,#lev4,#lev5").text(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="s1">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">30</option>
  <option value="90">40</option>
</select>

<table class="table">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>Level 5</td>
      <td id="lev5">2000</td>
    </tr>
    <tr>
      <td>Level 4</td>
      <td id="lev4">1000</td>
    </tr>
    <tr>
      <td>Level 3</td>
      <td id="lev3">500</td>
    </tr>
    <tr>
      <td>Level 2</td>
      <td id="lev2">200</td>
    </tr>
    <tr>
      <td>Level 1</td>
      <td id="lev1">100</td>
    </tr>
  </tbody>
</table>

我想将级别值显示为：

选项10：var = [19,39,49,79,199]
选项20：var = [39,49,79,199,239]
选项50：var = [49,79,199,239,299]
选项90：var = [79,199,239,299,399]

我该怎么做？我是新手，并且只学习了jQuery的基础知识。我所做的一些例子：http://www.w3schools.com/code/tryit.asp?filename=FCLNW59MAXD1

Answer 1

将数据保存在json对象中并使用jQuery.text( function )。

您也可以使用Attribute Starts With Selector [name^=”value”]来减少代码。

摘录：

＆＃13;

var r = {
  '10': [19, 39, 49, 79, 199],
  '20': [39, 49, 79, 199, 239],
  '50': [49, 79, 199, 239, 299],
  '90': [79, 199, 239, 299, 399]
};
$(document).ready(function () {
  $('#s1').on('change', function (e) {
    var v = $(this).val();
    $('[id^="lev"]').text(function (idx, text) {
      return r[v][idx];
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<table class="table" style="width:50%;background:#E5B794;color:#111;text-align:center;border-radius:12px;padding:10px;">
    <tbody>
    <tr>
        <td>Level 5</td>
        <td id="lev5">2000</td>
    </tr>
    <tr>
        <td>Level 4</td>
        <td id="lev4">1000</td>
    </tr>
    <tr>
        <td>Level 3</td>
        <td id="lev3">500</td>
    </tr>
    <tr>
        <td>Level 2</td>
        <td id="lev2">200</td>
    </tr>
    <tr>
        <td>Level 1</td>
        <td id="lev1">100</td>
    </tr>
    </tbody>
</table>
<br>
<select id="s1" style="width:48%;border-radius:12px;background:#E5B794;color:#111;">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">30</option>
    <option value="90">40</option>
</select>

＆＃13;

Answer 2

您可以将所有这些值和数组放在一个对象中，然后只需使用forEach循环，这样数组中的每个元素都与行索引匹配。

var values = {
  10: [19, 39, 49, 79, 199],
  20: [39, 49, 79, 199, 239],
  50: [49, 79, 199, 239, 299],
  90: [79, 199, 239, 299, 399]
}
$('select').change(function() {
  values[$(this).val()].forEach(function(e, i) {
    $('table tr:eq(' + i + ')').find('td:nth-child(2)').text(e)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">30</option>
  <option value="90">40</option>
</select>
<table>
  <tbody>
    <tr>
      <td>Level 5</td>
      <td id="lev5">2000</td>
    </tr>
    <tr>
      <td>Level 4</td>
      <td id="lev4">1000</td>
    </tr>
    <tr>
      <td>Level 3</td>
      <td id="lev3">500</td>
    </tr>
    <tr>
      <td>Level 2</td>
      <td id="lev2">200</td>
    </tr>
    <tr>
      <td>Level 1</td>
      <td id="lev1">100</td>
    </tr>
  </tbody>
</table>

更改表值的jQuery

2 个答案: