显示表单元格函数

更新：更准确地说，表格单元格出现并立即消失？

更新更新：如果我使用OnMousedown而不是OnClick，它可以工作吗？但是，当然，第二个我释放鼠标按钮再次消失，这样它也无法工作。

所以我已经四处搜索，似乎无法完成这项工作。我只是尝试制作一个函数，以便当我单击一个按钮时，它会更改单个单元格的默认显示样式以显示单元格。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

" http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="buildform.js" defer></script>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="buildform.css" />
</head>
<body>
<form id="buildForm">
<table>
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
    <tr>
    <td colspan="3">Custom Computers Order Form</td>
    </tr>
    <tr>
        <td><label>Operating System</label></td>
        <td>
            <select id="operatingSys" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="w7h" value="w7h">Windows 7 Home</option>
                <option name="w7p" value="w7p">Windows 7 Professional</option>
                <option name="w10h" value="w10h">Windows 10 Home</option>
                <option name="w10p" value="w10p">Windows 10 Professional</option>
            </select>
        </td>
        <td rowspan=2><label name="displayPrice" id="displayPrice">Display</label></td>
    </tr>
    <tr>
        <td><label>Processor</label></td>
        <td>
            <select id="processors" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ii3" value="i3">Intel i3</option>
                <option name="ii5" value="i5">Intel i5</option>
                <option name="ii7" value="i7">Intel i7</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Motherboard</label></td>
        <td>
            <select id="motherboards" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="a" value="a">Motherboard a</option>
                <option name="b" value="b">Motherboard a</option>
                <option name="c" value="c">Motherboard a</option>
            </select>
        </td>
    </tr>
    <tr>
        <td rowspan=4><label>RAM</label></td>
        <td>
            <select id="ram1" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ii3" value="i3">Intel i3</option>
                <option name="ii5" value="i5">Intel i5</option>
                <option name="ii7" value="i7">Intel i7</option>
            </select>
            <button onclick="add()">Add More?</button>
        </td>
    </tr>
    <tr>
        <td id="hiddenRam1">
            <select id="ram2" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ii3" value="i3">Intel i3</option>
                <option name="ii5" value="i5">Intel i5</option>
                <option name="ii7" value="i7">Intel i7</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="hiddenRam2">
            <select id="ram3" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ii3" value="i3">Intel i3</option>
                <option name="ii5" value="i5">Intel i5</option>
                <option name="ii7" value="i7">Intel i7</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="hiddenRam3">
            <select id="ram4" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ii3" value="i3">Intel i3</option>
                <option name="ii5" value="i5">Intel i5</option>
                <option name="ii7" value="i7">Intel i7</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Hard Drive</label></td>
        <td>
            <select id="hardrives" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="ssd128gb" value="ssd128gb">128 GB Corsair SSD</option>
                <option name="ssd256gb" value="ssd256gb">256 GB Corsair SSD</option>
                <option name="hdd500gb" value="hdd500gb">500 GB Western Digital HDD</option>
                <option name="hdd1tb" value="hdd1tb">1 TB Western Digital HDD</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Power Supply</label></td>
        <td>
            <select id="psus" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="300watt" value="300watt">300 Watt P/S</option>
                <option name="400watt" value="400watt">400 Watt P/S</option>
                <option name="500watt" value="500watt">500 Watt P/S</option>
                <option name="600watt" value="600watt">600 Watt P/S</option>
                <option name="700watt" value="700watt">700 Watt P/S</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Case</label></td>
        <td>
            <select id="processors" onchange="buildTotal()">
                <option name="none" value="none" selected>Select One</option>
                <option name="case1" value="case1">Case 1</option>
                <option name="case2" value="case2">Case 2</option>
                <option name="case3" value="case3">Case 3</option>
            </select>
        </td>
    </tr>
</table>

JavaScript

function add() {
var x = document.getElementById("hidden");
    x.style.display = "table-cell";
}

当有人单击"添加更多"按钮时，第二个选择选项的选择应显示。我不知道我在做什么错。什么都没有发生。

尝试以下内容：

x.style.display = "table-cell"

相关内容

最新更新

热门标签：