Question

我有一个html表。它包含一个下拉框作为行。我需要根据下拉框中的值将值附加到表中。我不知道该怎么做。所以我使用两张桌子。我的html代码如下：

<html>
    <head>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script language="javascript">

            function change() {
                document.getElementById('addPfForm1').style.display = 'block';
                if (document.getElementById('addPfForm').type.value == "hBased") {
                    $('#addPfForm1').html("");
                    $('#addPfForm1').html("<font size='2'><table bgcolor='#D2DFEF'><col width='170'><col width='30'><td>Market Value:</td><td><input type='text' name='mktVal'/></td></tr><tr><td>wtScheme:</td><td><input type='text' name='wtScheme'/></td></tr><tr><td></td><td><input type='button' value='OK' onclick='addPortfolioFunction()'/><input type='button' value='CANCEL' onclick='addPortfolioFunction(this.value )'/></td></tr></table></font>");
                }
                if (document.getElementById('addPfForm').type.value == "setBased") {
                    $('#addPfForm1').html("");
                    $('#addPfForm1').html("<font size='2'><table bgcolor='#D2DFEF'><col width='170'><col width='30'><tr><td>rules</td><td><input type='text' name='shrsSplitAdjusted'/></td></tr><tr><td></td><td><input type='button' value='OK' onclick=alert('hai');/><input type='button' value='CANCEL' onclick='addPortfolioFunction(this.value )'/></td></tr></table></font>");
                }
            }

        </script>
    </head>
    <body>
        <form id='addPfForm'>
        <font size='2'>
            <table bgcolor='#D2DFEF'>
                <col width='170'>
                <col width='30'>
                <tr>
                    <td>
                        Portfolio Name:
                    </td>
                    <td>
                        <input type='text' name='name'>
                    </td>
                </tr>
                <tr>
                    <td>
                        Group Name:
                    </td>
                    <td>
                        <input type='text' name='group'>
                    </td>
                </tr>
                <tr>
                    <td>
                        Type:
                    </td>
                    <td>
                        <select id='type' onchange='change();'>
                            <option value='hBased'>H Based</option>
                            <option value='setBased'>Set Based</option>
                        </select>
                    </td>
                </tr>
                <tr>
            </table>
        </font>
        </form>
        <form id='addPfForm1'>
        <br>
        </form>
    </body>
</html>

如何根据下拉选项而不是这种糟糕的方法将值附加到表中？

Answer 1

尝试使用jQuery的html()，而不是使用append()。 append()会添加一些内容，而不会替换其他所有内容。

然后你可以做类似

的事情

$("table").append("<tr><td>Table row here</td></tr>")

http://api.jquery.com/append/

Answer 2

试试这个......

<html>
<head>
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

        function change() {
            $('.hBased, .setBased').remove();
            if ($('#type').val() == "hBased") {
                $('#tblAppend').append(
                    "<tr class='hBased'><td>Market Value:</td><td><input type='text' name='mktVal'/></td></tr>" +
                    "<tr class='hBased'><td>wtScheme:</td><td><input type='text' name='wtScheme'/></td></tr>" +
                    "<tr class='hBased'><td></td><td><input type='button' value='OK' onclick='addPortfolioFunction()'/>" +
                    "<input type='button' value='CANCEL' onclick='addPortfolioFunction(this.value )'/></td></tr></table>");
            }
            else {
                $('#tblAppend').append(
                    "<tr class='setBased'><td>rules</td><td><input type='text' name='shrsSplitAdjusted'/></td></tr>" +
                    "<tr class='setBased'><td></td><td><input type='button' value='OK' onclick=alert('hai');/>" +
                    "<input type='button' value='CANCEL' onclick='addPortfolioFunction(this.value )'/></td></tr></table>");
            }
        }

    </script>
</head>
<body>
    <form>
    <table id="tblAppend" bgcolor='#D2DFEF'>
        <col width='170' />
        <col width='30' />
        <tr>
            <td>
                Portfolio Name:
            </td>
            <td>
                <input type='text' name='name' />
            </td>
        </tr>
        <tr>
            <td>
                Group Name:
            </td>
            <td>
                <input type='text' name='group' />
            </td>
        </tr>
        <tr>
            <td>
                Type:
            </td>
            <td>
                <select id='type' onchange='change();'>
                    <option value='hBased'>H Based</option>
                    <option value='setBased'>Set Based</option>
                </select>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

根据下拉选择将值附加到表

2 个答案: