查看“Widget:家具选项卡”的源代码


<head>
    <title>Dropdown Menu</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
    <script>
        function showTable() {
            var menu1 = document.getElementById('menu1').value;
            var menu2 = document.getElementById('menu2').value;
            var tables = document.getElementsByTagName('table');
            for (var i = 0; i < tables.length; i++) {
                tables[i].classList.add('hidden');
            }
            var table = document.getElementById(menu1 + '_' + menu2);
            table.classList.remove('hidden');
            document.getElementById('SumTable').classList.remove('hidden');
            for(i=1;i<table.getElementsByTagName("tr").length;i++){
                table.getElementsByTagName("tr")[i].getElementsByTagName("td")[0].innerHTML = '<input type="checkbox" onclick="reset_num(this)">';
                table.getElementsByTagName("tr")[i].getElementsByTagName("td")[5].innerHTML = '<input type="number" value="0" min="0" max="9999" oninput="costSum()">';
            }
            cleanScreen();
        }
        function reset_num(checkbox)
        {
            var row = checkbox.parentNode.parentNode;
            var textbox = row.cells[5].children[0];
            if (checkbox.checked) {
                 textbox.value = "1";
            } else {
                 textbox.value = "0";
                }
          costSum();
        }


    </script>
</head>
<body>
    <select id="menu1" onchange="showTable()">
        <option value="liubian">刘辩</option>
        <option value="furong">傅融</option>
        <option value="yuanji">袁基</option>
        <option value="zuoci">左慈</option>
        <option value="sunce">孙策</option>
    </select>
    <select id="menu2" onchange="showTable()">
        <option value="chunshanchongchong">春山重重</option>
        <option value="other">其他</option>
    </select>
    <!--写一组复选框，包含起居，置物，装饰，挂件，显示与复选框的值相同的表格类型的值对应的行 -->
    <input type="checkbox" id="qiju" value="qiju" onclick="showRow()">起居
    <input type="checkbox" id="zhiwu" value="zhiwu" onclick="showRow()">置物
    <input type="checkbox" id="zhuangshi" value="zhuangshi" onclick="showRow()">装饰
    <input type="checkbox" id="guajian" value="guajian" onclick="showRow()">挂件
  <input type="checkbox" id="diban" value="diban" onclick="showRow()">地板
  <input type="checkbox" id="qiangzhi" value="qiangzhi" onclick="showRow()">墙纸
  
    <script>
        function showRow() {
          cleanScreen();
            var menu1 = document.getElementById('menu1').value;
            var menu2 = document.getElementById('menu2').value;
            //获取页面上表格id=menu1的值+_+menu2的值 的表格
            var tables = document.getElementById(menu1 + '_' + menu2).getElementsByTagName("tr");
            for (var i = 1; i < tables.length; i++) {
                var row = tables[i];
                //如果表格某行的txt对应的复选框被选中，则显示该行
                //如果row.getElementsByTagName("td")[2].innerText包含对应文字则显示
                if (row.getElementsByTagName("td")[2].innerText.indexOf("起居") != -1) {
                    row.style.display = document.getElementById('qiju').checked ? '' : 'none';
                }
                if (row.getElementsByTagName("td")[2].innerText.indexOf("置物") != -1) {
                    row.style.display = document.getElementById('zhiwu').checked ? '' : 'none';
                }
                if (row.getElementsByTagName("td")[2].innerText.indexOf("装饰") != -1) {
                    row.style.display = document.getElementById('zhuangshi').checked ? '' : 'none';
                }
                if (row.getElementsByTagName("td")[2].innerText.indexOf("挂件") != -1) {
                    row.style.display = document.getElementById('guajian').checked ? '' : 'none';
                }
                if (row.getElementsByTagName("td")[2].innerText.indexOf("地板") != -1) {
                    row.style.display = document.getElementById('diban').checked ? '' : 'none';
                }
                if (row.getElementsByTagName("td")[2].innerText.indexOf("墙纸") != -1) {
                    row.style.display = document.getElementById('qiangzhi').checked ? '' : 'none';
                }
            }
        }
    </script>
  <button onclick="costSum()">计算</button>
  <button onclick="cleanScreen()">清空</button>

</body>