全站通知：
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>
沪公网安备 31011002002714 号