单击按钮时显示隐藏在表格中的默认值

Question

我喜欢创建一个具有默认隐藏tbody的简单表，所以当我单击一个按钮时。它将与我的thead一起显示。

这是我的HTML

    <div id="show">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Item Name</th>
                    <th>Item Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alvin</td>
                    <td>Eclair</td>
                    <td>$0.87</td>
                </tr>
            </tbody>
        </table>
    </div>

    <a href="#show">Show table body</a>

和CSS

    <style type="text/css">
        #show:target tbody td{
            display: inline-block;
        }
        table {
            border-collapse:collapse;
        }
        tbody td{
            display: none;
        }
     </style>

Answer 1

用小jquery

做

var array1 = [{ PersonalID: '11', questionNumber: '1', value: 'Something' }, { PersonalID: '12', questionNumber: '2', value: 'whatever' }, { PersonalID: '13', questionNumber: '3', value: 'anything' }, { PersonalID: '14', questionNumber: '4', value: 'null' }],
    array2 = [{ questionNumber: '2', chID: '111', cValue: 'red' }, { questionNumber: '2', chID: '112', cValue: 'green' }, { questionNumber: '2', chID: '113', cValue: 'blue' }, { questionNumber: '3', choiceID: '114', cValue: 'yellow' }, { questionNumber: '4', choiceID: '115', cValue: 'red' }],
    hash = Object.create(null);

array1.forEach(function (a) {
    hash[a.questionNumber] = a;
});

array2.forEach(function (a) {
    if (hash[a.questionNumber]) {
        hash[a.questionNumber].choice = hash[a.questionNumber].choice || [];
        hash[a.questionNumber].choice.push(a);
    }
});

console.log(array1);