0

我有一个问题，我需要能够在列表中动态插入新的搜索字段 - 按 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>

它将产生这个包含三列的简单布局：

在此处输入图像描述

如果我然后单击例如名称它应该添加一个input文本字段：

在此处输入图像描述

如果我然后添加例如Country字段，由于排序属性，它应该在Name之前添加此字段：

在此处输入图像描述

如果所有字段都可见：

在此处输入图像描述

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

谁能提示如何做到这一点？

4

2 回答 2

0 
        <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>

尝试这个。它会起作用的

于 2013-11-04T13:53:12.920 回答
0

您将类名称添加到搜索字段。

<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 属性相对应的每个复选框。

如果你愿意，我可以准备一个可行的解决方案。

于 2013-11-04T13:48:02.320 回答