如何使用 Django 访问模态中的索引值

Question

我正在尝试访问模态中数据框的值，但问题是我只能访问模态中的第一个索引值。如果我单击第二个或第三个索引的模式，我将获得第一个索引的值。

这是我的代码

def form(request):

    #return HttpResponse("form")
    #x = sol_one()
    #file = pd.read_csv('C:/Users/yassa/djangoProjects/first_demo_project/PythonExport.csv')
    #z=file.to_html()
    if request.method == "POST":
        num1 = request.POST["num1"]
        #num2 = request.POST["num2"]
        res,destinations = bigdata(num1)

        soup = BeautifulSoup(res.to_html(), "html.parser")
        soup.find("thead").find('tr').append(BeautifulSoup('<td>Next Result</td>', 'html.parser'))

        for i in soup.find("tbody").find_all('tr'):
            temp = i.find('th').text
            i.append(BeautifulSoup('<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Modal Header</h4></div><div class="modal-body"><p></p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></td>', 'html.parser'))
            #i.append(BeautifulSoup('<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Modal Header</h4></div><div class="modal-body"><p>'+str(destinations[int(temp)])+'</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></td>
            i.find('th')[7].find('p')str(destinations[int(temp)])
            print(destinations[int(temp)])

        #return HttpResponse({"res":res},file.to_html())
        #return HttpResponse(res.to_html())
        #return HttpResponse(soup)
        return checking(request,soup)

        #return render(request,"checking.html",{'res':res})
    else:
        return render(request,"form.html")

尽管在单击模式时所有值都在控制台上正确显示，但它在所有可单击模式上重复第一个索引的值。这是截图。

Answer 1

您正在添加多个具有相同 ID (#MyModal) 的模态框，因此当单击按钮时，将打开第一个 ID 为 MyModal 的模态框，其中包含第一个索引的数据。

一个快速解决方法是使用迭代器并为每个模态分配一个唯一的 ID，如下所示：

modal_identifier = 0

for i in soup.find("tbody").find_all('tr'):
            temp = i.find('th').text
            i.append(BeautifulSoup('<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal'+ modal_identifier +'">Open Modal</button><div class="modal fade" id="myModal'+ modal_identifier +'" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Modal Header</h4></div><div class="modal-body"><p></p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></td>', 'html.parser'))
            #i.append(BeautifulSoup('<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal'+ modal_identifier +'">Open Modal</button><div class="modal fade" id="myModal'+ modal_identifier +'" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Modal Header</h4></div><div class="modal-body"><p>'+str(destinations[int(temp)])+'</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></td>
            i.find('th')[7].find('p')str(destinations[int(temp)])
            print(destinations[int(temp)])

            modal_identifier += 1

您也可以考虑添加 1 个模态框，然后使用 Javascript 为模态框填充正确的数据。

Answer 2

你们模态框的id都一样。尝试以下操作：

def form(request):

    #return HttpResponse("form")
    #x = sol_one()
    #file = pd.read_csv('C:/Users/yassa/djangoProjects/first_demo_project/PythonExport.csv')
    #z=file.to_html()
    if request.method == "POST":
        num1 = request.POST["num1"]
        #num2 = request.POST["num2"]
        res,destinations = bigdata(num1)

        soup = BeautifulSoup(res.to_html(), "html.parser")
        soup.find("thead").find('tr').append(BeautifulSoup('<td>Next Result</td>', 'html.parser'))
        cnt = 0
        for i in soup.find("tbody").find_all('tr'):
            cnt += 1
            temp = i.find('th').text
            i.append(BeautifulSoup('<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal%s">Open Modal</button><div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Modal Header</h4></div><div class="modal-body"><p></p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></td>' % str(cnt), 'html.parser'))
            i.find('th')[7].find('p')str(destinations[int(temp)])
            print(destinations[int(temp)])

        #return HttpResponse({"res":res},file.to_html())
        #return HttpResponse(res.to_html())
        #return HttpResponse(soup)
        return checking(request,soup)

        #return render(request,"checking.html",{'res':res})
    else:
        return render(request,"form.html")

如何使用 Django 访问模态中的索引值

How to access the index values in modal using Django

python

django

modal-dialog

dataframe