0

ユーザーが約 100 の変数から選択できる動的テーブルを作成しようとしています。これらの変数はカテゴリに分割されておりselect、ユーザーが最初に値を選択することに応じて、2 番目に表示していますselect。私は答えを求めてウェブを検索してきましたが、空白になりました。clone() 呼び出しはすべてのデータを複製することを認識しています。そのため、行の ID は不適切な選択です。

これが私が現在HTMLのために持っているものです：

        <body>
                <table name='myTable' class="dynatable">
                    <thead>
                        <tr>
                            <th class='idCol' >ID</th>
                            <th>Category</th>
                            <th>Metric</th>
                            <th>Conditional</th>
                            <th><button class="add">Add</button></th>
                        </tr>
                    </thead>
                    <tbody>
                        <form name='myForm'>
                            <tr class="first">
                                <td class="id idCol"><input type="text" name="id[]" value="0" /></td>
                                <td><select name='categories' onChange='updatemetrics(this.selectedIndex)' style="width: 260px">
                                    <option selected>--Select Category--</option>
                                    <option value='1'>Customer Experience</option>
                                    <option value='2'>Key Satisfaction Identifiers</option>
                                    <option value='3'>Personnel Costs</option>
<!-- I have cut the rest out for the sake of brevity. -->
                                    </select></td>

<!-- This is the select that populates based on the user's choice. -->
    <td><select style="width: 310px"name='metrics'></select></td>
                            </tr>
                    </form>
                </tbody>
            </table>
             </body>

私が取り組んでいるJavascriptは次のとおりです。

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

            // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone(true);
                prot.attr("class", "")
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();

            });
        });

        //script for dynamically populating the metrics select
        var metricCategories=document.myForm.categories;
        var metricList=document.myForm.metrics;

        var metrics=new Array()
        metrics[0]=" "                      
        metrics[1]=['Wait time average|waitInLine','Mystery Shopper Scores|mysteryScores']
        metrics[2]=['Referral Rate|ref_rate','Facebook Shares|facebook_shares','Twitter Followers|twit_followers','Customer Complaint Calls|comp_calls']
        metrics[3]=['Pension Payouts|pension_pay', 'Full Time Employees|ftes', 'Part Time Employees|ptes', 'Contractor Costs|contract_costs']

        function updatemetrics(selectedMetricGroup){
            metricList.options.length=0
            if (selectedMetricGroup>0) {
                for (i=0; i<metrics[selectedMetricGroup].length; i++)
                metricList.options[metricList.options.length]=new Option(metrics[selectedMetricGroup][i].split("|")[0], metrics[selectedMetricGroup][i].split("|")[i])
            }
        }

どんな助けでも大歓迎です。私が助けを求めている理由を繰り返しますが、select相互に作用するノードを保持する行を追加/削除する必要があります。前もって感謝します。

4

0 に答える 0