0

我正在尝试编写一个 Web 表单，该表单将具有基于用户在表单早期输入的可选选项。

我被卡住的地方是；

  • 我有一个表房间类型，它只是带有输入标签（类型=文本）的 td 标签。这些是用户填写的，所以我不知道它们是什么..
  • 我有一个按钮可以向该表添加额外的行（Jquery 添加另一个 td 标记和输入标记）
  • 用户根据需要添加尽可能多的行

表格的下一部分是填写房间，并为每个房间选择类型。表格布局是相同的（除了有两列，而不是一列），额外的行是通过另一个带有 Jquery 的按钮添加的。

我希望能够做的是添加新行以在表格中有两列。一个输入文本字段，另一个是带有上表选项的选择框。

我已经设法使这项工作达到了一定程度。但由于用户可能会从原始（房间类型）表中返回编辑选项，因此我需要选择框根据原始表当前显示的内容调整它们的值。

我可以通过每次访问一个输入字段时清空并重新填充我的选择框来完成这项工作（使用 OnBlur，这可能不是最有效的方法），但是因为它从 bxes 中删除条目，然后重新-填充，任何已填充的选择框都已重置。我只想重置无效选项（即原始表中不存在的值）。

我已经看/玩了很长时间了，但是我的编程能力只是我从这里和谷歌那里学到的，而之前在一些非常小的事情上搞砸了......

我的 HTML 代码（好吧，我的代码的一部分，我已经删除了所有不相关的代码以保持简单）在这里：

<div id="rm_types_info">
    <table id="room_types_table">
        <tr>
            <td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
        </tr>
    </table>

    <button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>

<div id="rooms_info">
    <table id="rooms_table">
        <tr>
            <th>Room Number</th>
            <th>Room Type</th>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td>
                <select class="room_type_select">
                    <option value="Please Choose">Please Choose</option>
                </select>
            </td>
        </tr>
    </table>

    <button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>

我的 JQuery 是；

<script>
    var userscounter=2
    var rmtypescounter=1
    var roomscounter=2

    function users(ID){
        document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
        userscounter++;
    };

    function rmtypes(ID){
        document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
        rmtypescounter++;
    }

    function rooms(ID){
        document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
        roomscounter++;
    };


    function edit_rooms_select(){   
        var roomtypelist = $('.room_type_select');
        roomtypelist.empty()
        $('#room_types_table tr td input').each(function(){
            var text = $(this).val();
            roomtypelist.append('<option value='+text+'>'+text+'</option>');
        });
    }
</script>

我已经删除了删除重复项的 Jquery，因为它肯定无法正常工作......

我知道我可能会以完全错误的方式进行此操作，如果使用 td 标签或输入等完全错误，我很乐意更改必要的整个表单。

4

1 回答 1

0

我确信这不是做我需要的最有效的方法，但这就是我设法让它工作的方式......

我的 HTML...

<div id="rm_types_info">
    <table id="room_types_table">
        <tr>
            <td><input type="text" name="2" class="room_types" onblur="edit_rooms_select();" /></td>
        </tr>
    </table>

    <button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>

<div id="rooms_info">
    <table id="rooms_table">
        <tr>
            <th>Room Number</th>
            <th>Room Type</th>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td>
                <select class="room_type_select" id="room_type_select1" >
                    <option value="1">Please Choose</option>
                </select>
            </td>
        </tr>
    </table>

    <button type="button" onclick="rooms('rooms_table');edit_rooms_select();">Add Another Room</button>
</div>

与 JQuery 脚本相关。特别是，这是最后一个函数“edit_rooms_select()”，特别是我正在努力解决的“为每个选择添加新选项”。

<script>
    var rmtypescount=3;
    var room_type_select_count=2;

    function rmtypes(){
        $('#room_types_table tr:last').after('<tr><td><input type="text" name='+rmtypescount+' class="room_types" onblur="edit_rooms_select();" /></td></tr>');
        rmtypescount++;
    };

    function rooms(){
        $('#rooms_table tr:last').after('<tr><td><input type="text" /></td><td><select id="room_type_select'+room_type_select_count+'" class="room_type_select"><option value="1">Please Choose</option></select></td></tr>');
        room_type_select_count++
    };

    function edit_rooms_select(){       
        $('#room_types_table tr td input').each(function(){
            var name = $(this).attr('name');
            var value = $(this).val();
//Add New Options to each select            
            $('#rooms_table select').each(function(){
                var last = $(this).children('option:last').val();
                if (name > last) {
                    $(this).append('<option value="'+name+'">'+value+'</option>');
                };
            });
//Change any room types that have been edited           
            $('.room_type_select option').each(function(){
                var match = $(this).val();
                if(name == match){
                    $(this).text(value)
                };
            });
//Remove Blank Entries
            if(value == ''){
                $('.room_type_select option[value='+name+']').remove();
            };
        });
    };
</script>

我认为 edit_rooms_select 函数比它需要的要贵得多。对于我的要求，这不会成为问题，但我很想看看其他人建议如何按照我的要求编辑列表。-来自 room_types_table 的所有用户输入必须是选择中的选项rooms_table 中的框 - room_types_table 中更改的任何输入必须在选择框中更改其相关选项以匹配 - 从 room_types_table 中留空（或稍后删除）的任何输入必须从选择框中删除 - 任何选择框有一个选择，然后从 room_types_table 中删除，必须重置回原来的“请选择”选项。

如果有人可以提出更好的方法来做到这一点，或者可以以任何方式整理我的代码，我希望看到代码，并对其进行解释，因为我对 Javascript/Jquery 非常缺乏经验。

于 2013-04-01T16:02:08.327 回答