Fatal编程技术网
  • javascript/
  • Javascript 如何使用Django在网页上显示的表格元素周围绘制方框

Javascript 如何使用Django在网页上显示的表格元素周围绘制方框

javascript python html css django

Javascript 如何使用Django在网页上显示的表格元素周围绘制方框,javascript,python,html,css,django,Javascript,Python,Html,Css,Django,我第一次尝试使用Django作为web框架 My views.py函数如下所示： def display(request): find_duplicate() return render_to_response('index.html', {'obj': my_model.objects.order_by('id')}) def get_dict(): d={} for e in my_model.objects.all(): col2 = e.

我第一次尝试使用Django作为web框架

My views.py函数如下所示：

def display(request):
    find_duplicate()
    return render_to_response('index.html', {'obj': my_model.objects.order_by('id')})

def get_dict():
    d={}
    for e in my_model.objects.all():
        col2 = e.col2
        col3 = e.col3
        col2 = unicode(col2).encode('UTF8')
        col3 = unicode(col3).encode('UTF8')
        d.setdefault(col2, [])
        d[col2].append(col3)
    del d['']
    return d

def find_duplicate():
    #print(d)
    d = get_dict()
    for k,v in d.items():
        if len(v) > 1:
            name=[]
            id=[]
            #print(k)
            for i in v:
                #print(i)
                reg1 = i.split("(")[0]
                name.append(reg1)
                reg2 = re.search(r'[A-Z0-9]*', i.split("_")[1])
                id.append(reg2.group())
            #print(name)
            #print(id)
我的index.html如下所示：

<body>

    <div class="container">
    <table align="center">
        <tr>
            <th bgcolor="#f0a00c">Col1</th>
            <th bgcolor="#f0a00c">Col2</th>
            <th bgcolor="#f0a00c">Col3</th>
            <th bgcolor="#f0a00c">Col4</th>
            <th bgcolor="#f0a00c">Col5</th>
       </tr>
       {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td>{{ b.col2 }}</td>
            <td>{{ b.col3 }}</td>
            <td>{{ b.col4 }}</td>
            <td>{{ b.col5 }}</td>
        </tr>
    {% endfor %}

    </table>
    </div> <!-- /container -->

<script>
        var col21 = [], col31 =[];
        {% for b in obj %}
        col21.push("{{b.col2 }}");
        col31.push("{{b.col3 }}");
        {% endfor %}
        console.log(col21);
        console.log(col31);
    </script>
    </body>

{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}
因此，现在index.html显示由col2排序的mysql数据库，如下所示：

Col2   | Col3                   | Col4
1      | Name1(something_1234)  | Some_date
1      | Name1(something_3456)  | Some_date
2      | Name3(something_7890)  | Some_date
2      | Name4(something_0988)  | Some_date
现在，views.py中的
get_dict（）
函数返回字典
d
，如下所示：

<body>

    <div class="container">
    <table align="center">
        <tr>
            <th bgcolor="#f0a00c">Col1</th>
            <th bgcolor="#f0a00c">Col2</th>
            <th bgcolor="#f0a00c">Col3</th>
            <th bgcolor="#f0a00c">Col4</th>
            <th bgcolor="#f0a00c">Col5</th>
       </tr>
       {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td>{{ b.col2 }}</td>
            <td>{{ b.col3 }}</td>
            <td>{{ b.col4 }}</td>
            <td>{{ b.col5 }}</td>
        </tr>
    {% endfor %}

    </table>
    </div> <!-- /container -->

<script>
        var col21 = [], col31 =[];
        {% for b in obj %}
        col21.push("{{b.col2 }}");
        col31.push("{{b.col3 }}");
        {% endfor %}
        console.log(col21);
        console.log(col31);
    </script>
    </body>

{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}
而
find_duplicate（）
函数从
Col3
的每个元素中解析
name
和
id
部分。因此，该函数中的
print（name）
将为每个
键
（num）提供
名称
和
id
，即
['Name1'，'Name1']
和
['1234'，'3456']
键
1

现在，基于此，我希望在表元素上显示红色框，如下所示：


<body>

    <div class="container">
    <table align="center">
        <tr>
            <th bgcolor="#f0a00c">Col1</th>
            <th bgcolor="#f0a00c">Col2</th>
            <th bgcolor="#f0a00c">Col3</th>
            <th bgcolor="#f0a00c">Col4</th>
            <th bgcolor="#f0a00c">Col5</th>
       </tr>
       {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td>{{ b.col2 }}</td>
            <td>{{ b.col3 }}</td>
            <td>{{ b.col4 }}</td>
            <td>{{ b.col5 }}</td>
        </tr>
    {% endfor %}

    </table>
    </div> <!-- /container -->

<script>
        var col21 = [], col31 =[];
        {% for b in obj %}
        col21.push("{{b.col2 }}");
        col31.push("{{b.col3 }}");
        {% endfor %}
        console.log(col21);
        console.log(col31);
    </script>
    </body>



{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}




因此，对于Col2中的所有值，如果任何2个值相同，则应在其周围显示一个框，然后针对该Col2值，选中
name
部分和
id
部分，然后相应地在其周围显示框


现在我只能够显示表格，但如何显示表格以及表格元素周围的框？
这听起来更像是一个JS/CSS解决方案，因为我不知道如何用简单的Django方法来实现这一点。您可以在单独的部分中订购qs，并在不同的
{%for b in obj%}
中显示它们，例如具有多个
obj1
，
obj2
等等，并渲染每个部分。但是我认为写一些JS和检查相同的名字等更容易。@Hanseffranz你能指导我如何使用JS吗？不太熟悉。如果您看到代码，我将在html文件中的不同数组中获取col2和col3值（命名为col21、col31 resp）。我还应该做什么？我不得不说我很想做，但我觉得有一个简单的解决方案，我会写1000行代码。说到“好/干净”的解决方案，我不是最佳人选。如果你问我，我会尝试找到具有相同名称的元素（可能使用regex？），并给每对元素一个特殊的类。所有这些都必须在for/while循环中完成，以确保您获得了所有记录（因为您以前不知道您获得了多少记录）。所以如果我这样做的话会很混乱，从来没有和桌子一起工作过。再说一次，我绝对不是正确的人来引导你完成这件事。我只是搜索了一下，没有找到任何关于这个主题的东西。事实上，我觉得这很有趣，我不明白为什么以前没有人尝试过（或者为什么我找不到）。也许你应该在没有Django和Python标签的情况下问这个问题，这样你就不会吓跑非Pythonists，或者你等着，也许一些有经验的用户会过来帮忙。“我肯定会投赞成票的。”汉瑟夫兰兹，谢谢。我会等着看是否有人回应我。