Question

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

UPDATE UPDATE：如果我使用onmousedown而不是onclick，它会起作用吗？但当然第二次我释放鼠标按钮它再次消失，所以也不会工作。

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

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

＆＃34; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＆＃34;＆GT;

<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";

}

当有人点击“添加更多”时，按钮，第二个选项应显示选项。我不知道我做错了什么。什么都没发生。

Answer 1

尝试以下方法：

x.style.display = "table-cell"

显示表格单元格功能

1 个答案: