Question

我遇到一个问题，我需要能够在列表中动态插入新的搜索字段 - 按照HTML5数据属性中定义的特定顺序排序。

如果我有这个简单的HTML代码：

<table>
<tr>
    <td>Personel</td>
    <td>Region</td>
    <td>Misc</td>
</tr>
<tr>
    <td>
        <input type='checkbox' data-sort='3'> Name<br />
        <input type='checkbox' data-sort='4'> Gender
    </td>
    <td>
        <input type='checkbox' data-sort='1'> Country
    </td>
    <td>
        <input type='checkbox' data-sort='2'> Parent
    </td>      
</tr>
</table>

这将导致这个简单的布局有三列：

enter image description here

如果我点击例如名称，则应添加input文字字段：

enter image description here

如果我添加例如国家/地区字段，则应该在名称之前添加此字段，因为排序属性：

enter image description here

如果所有字段都可见：

enter image description here

当然反过来，取消选中复选框，它应该删除搜索字段。我有这个小提琴手的简单代码http://jsfiddle.net/kEnye/

任何人都可以暗示如何做到这一点吗？

Answer 1

您可以在搜索字段中添加班级名称。

<input type='text' class="search-field" size='7' value='Country' >

最初隐藏所有搜索字段，当您选择/取消选中附加/删除（jQuery函数append() / prepend()和remove()）搜索字段的复选框时。

选中复选框后，检查复选复选框中每个元素的排序属性。

$('input:checked[type="checkbox"]').each(function(){console.log($(this).data('sort'));});

如果其中任何一个具有较大的排序属性值，那么您可以在与此复选框对应的搜索字段之前附加新的搜索字段。否则，如果没有一个复选框具有更大的排序值，那么您只需附加搜索字段。

为了找到相应的搜索字段，这对于取消选中复选框时调用也很有用，您需要搜索所有搜索字段，其值与已选中/未选中的值相同复选框。

//where this is the checked/unchecked checkbox

     $('input.search-field[value="Name"]')

为此，最好将 value 属性添加到与搜索字段的value属性对应的每个复选框中。

如果您愿意，我可以准备一份有效的解决方案。

Answer 2

        <table>
            <tr>
                <td>Personel</td>
                <td>Region</td>
                <td>Misc</td>
            </tr>
            <tr>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='3' checked='checked'> Name<br />
                    <input type='checkbox' data-sort='4' checked='checked'> Gender
                </td>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='1' checked='checked'> Country
                </td>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='2' checked='checked'> Parent
                </td>

            </tr>
        </table>
        <br />

        <input type='text'data-sort="1" size='7' value='Country'> <input type='text' size='7' data-sort="2" value='Parent'> <input type='text' size='7' value='Name' data-sort="3"> <input type='text' size='7' value='Gender' data-sort="4">
            <script>
    $('input:checkbox').change(function(){

            if(!$(this).is(':checked'))
            {
            $('input:text[data-sort="'+$(this).attr('data-sort')+'"]').hide();
            }
            else{

                 $('input:text[data-sort="'+$(this).attr('data-sort')+'"]').show();
            }
        });
</script>

试试这个。它会起作用

从复选框选择中插入已排序的输入文本框

2 个答案: