0

我正在尝试创建一个动态表，允许用户从大约 100 个变量中进行选择。这些变量已被分成几类，我会在一秒钟内显示它们，select这取决于用户在第一个中选择的值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