Question

目标 - 用户选择常规，短或长，然后根据之前的选择在英制和CM之间切换。第一层已经工作，所以我们根据常规，短期或长期选择选项显示不同的表格现在我只需要能够以英寸或CM显示表格。请看下面的代码。欢迎任何帮助。感谢

＆＃13;

var tables = $('.charge-table');
$('input[name="group1"]').on('change', function() {
  tables.hide();
  $('#' + $(this).val()).show();
});

＆＃13;

#charge {
  display: table;
}
.charge-table {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="selection1" type="radio" name="group1" value="charge" checked>Regular
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">Short
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">Long
  <br/>
</div>
<br/>
<div>
  <input id="selection4" type="radio" name="group1" value="charg3">Inches
  <br/>
  <input id="selection5" type="radio" name="group1" value="charge4">CM
  <br/>

</div>


<table id="charge" class="charge-table">
  <tr>
    <td>Regular</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr>
    <td>Short</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr>
    <td>Long</td>
  </tr>
</table>

＆＃13;

Answer 1

将英寸和CM分成另一组。
将课程.charge-row添加到<tr> s。
将.charge3和.charge4作为类添加到不同的tr。
添加另一个输入更改侦听器以执行类似的操作。

或者

将使用chargeX更改为类，并根据长度和类型创建所有组合（如此创建6表），为每个组添加类，如charge1 charge4 ...
当任何组的值发生变化时，同时获取它们的两个值，例如。 value1=charge1, value2=charge4。
隐藏所有表格。
使用$('.' + value1 + '.' + value2).show()显示目标表。

＆＃13;

var tables = $('.charge-table');
var rows = $('.charge-row');
$('input[name="group1"]').on('change', function() {
  tables.hide();
  $('#' + $(this).val()).show();
});
$('input[name="group2"]').on('change', function() {
  rows.hide();
  $('.' + $(this).val()).show();
});

＆＃13;

#charge {
  display: table;
}

.charge-row.charge3 {
  display: table-row;
}

.charge-table, .charge-row {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="selection1" type="radio" name="group1" value="charge" checked>Regular
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">Short
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">Long
  <br/>
</div>
<br/>
<div>
  <input id="selection4" type="radio" name="group2" value="charge3" checked>Inches
  <br/>
  <input id="selection5" type="radio" name="group2" value="charge4">CM
  <br/>

</div>


<table id="charge" class="charge-table">
  <tr class="charge3 charge-row">
    <td>Regular</td><td>Inches</td>
  </tr>
  <tr class="charge4 charge-row">
    <td>Regular</td><td>CM</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr class="charge3 charge-row">
    <td>Short</td><td>Inches</td>
  </tr>
  <tr class="charge4 charge-row">
    <td>Short</td><td>CM</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr class="charge3 charge-row">
    <td>Long</td><td>Inches</td>
  </tr>
  <tr class="charge4 charge-row">
    <td>Long</td><td>CM</td>
  </tr>
</table>

＆＃13;

但是，如果您可以将数据保存在js中。我更喜欢只有一个表，并且有一个函数可以从{regular, short, long}和{inches, cm}获得价值并创建格式化数据，然后将每个td的文本更新为新数据。

＆＃13;

var $table = $('.charge-table');

// Fake data.
var data = [['data']];

// Create 
var lMapping = {
    charge : 'Regular',
    charge1: 'Short',
    charge2: 'Long'
};
var tMapping = {
    charge3: 'Inches',
    charge4: 'CM'
};

var renderTable = function() {
    // Get value from each group
    var value1 = $('input[name="group1"]:checked').val();
    var value2 = $('input[name="group2"]:checked').val();
  
    // Put data to each td.
    data.forEach(function(rowData, i) {
        var $row = $table.find('tr').eq(i);
        rowData.forEach(function(item, j) {
            var $td = $row.find('td').eq(j);
          
            // Create formatted data from radio values.
            var str = lMapping[value1] + ' ' + tMapping[value2] + ' ' + data;
            $td.text(str);
        });
    });
};


$('input[type="radio"]').on('change', renderTable);

// Set init state.
renderTable();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
    <input id="selection1" type="radio" name="group1" value="charge" checked /> Regular
  <br/>
      <input id="selection2" type="radio" name="group1" value="charge1"/>Short
  <br/>
      <input id="selection3" type="radio" name="group1" value="charge2" />Long
  <br/>
      <hr/>
<div/>
<div>
    <input id="selection4" type="radio" name="group2" value="charge3" checked />Inches
  <br/>
      <input id="selection5" type="radio" name="group2" value="charge4" />CM
  <br/>
</div>

<table id="charge" class="charge-table">
  <tr>
    <td>Regular</td>
  </tr>
</table>

＆＃13;

根据单选按钮选择显示表格ID。

1 个答案: