0

私はhtmlテーブルを持っています。行としてドロップダウンボックスが含まれています。ドロップダウン ボックスの値に従って、テーブルに値を追加する必要があります。これを行う方法がわかりません。だから私は2つのテーブルを使用しています。私の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>

この貧弱なアプローチの代わりに、ドロップダウンの選択に従ってテーブルに値を追加するにはどうすればよいですか?

4

2 に答える 2