Question

我是stackoverflow和django的新手，如果这还不够说明性的话，抱歉。

models.py文件

from django.db import models

# Create your models here.
SPORTS_CHOICES = (
    ('nfl', 'NFL'),
    ('nba', 'NBA'),
    ('mlb', 'MLB'),
)

class Event(models.Model):
    sports = models.CharField(max_length=3, choices=SPORTS_CHOICES, default='nfl')
    event_name = models.CharField(max_length=100, default='')
    home_team = models.CharField(max_length=100)
    away_team = models.CharField(max_length=100)
    home_team_moneyline_odds = models.DecimalField(max_digits=3,decimal_places=2)
    away_team_moneyline_odds = models.DecimalField(max_digits=3, decimal_places=2)
    home_team_spread = models.CharField(max_length=100)
    home_team_spread_odds = models.DecimalField(max_digits=3, decimal_places=2)
    away_team_spread = models.CharField(max_length=100)
    away_team_spread_odds = models.DecimalField(max_digits=3, decimal_places=2)
    total_points_over = models.CharField(max_length=100)
    total_points_over_odds = models.DecimalField(max_digits=3, decimal_places=2)
    total_points_under = models.CharField(max_length=100)
    total_points_under_odds = models.DecimalField(max_digits=3, decimal_places=2)

    def __str__(self):
        return format(self.event_name)

views.py

from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import Event

# Create your views here.
@login_required
def sports(request):
    context = {
        'events': Event.objects.all()
    }
    return render(request, 'sports/sports.html', context)

sports.html

{% extends "blog/base.html" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
             {% for event in events %}
                <table class="table table-light table-sm table-hover">
                    <tr class="thead-dark">
                        <th style="width: 31%">Teams</th>
                        <th style="width: 23%">Spread</th>
                        <th style="width: 23%">Win</th>
                        <th style="width: 23%">Total</th>
                    </tr>
                    <tr>
                        <th class="table-bordered">{{ event.home_team }}</th>
                        <td class="table-bordered"><button class="removebuttonstyling">{{ event.home_team_spread }} ({{ event.home_team_spread_odds }})</button></td>
                        <td class="table-bordered"><button class="removebuttonstyling">{{ event.home_team_moneyline_odds }}</button></td>
                        <td class="table-bordered"><button class="removebuttonstyling"> O {{ event.total_points_over }} ({{ event.total_points_over_odds }})</button></td>
                    </tr>
                     <tr>
                         <th class="table-bordered">{{ event.away_team }}</th>
                         <td class="table-bordered"><button class="removebuttonstyling">{{ event.away_team_spread }} ({{ event.away_team_spread_odds }})</button></td>
                         <td class="table-bordered"><button class="removebuttonstyling">{{ event.away_team_moneyline_odds }}</button></td>
                         <td class="table-bordered"><button class="removebuttonstyling"> U {{ event.total_points_under }} ({{ event.total_points_under_odds }})</button></td>
                    </tr>
                </table>
                {%  endfor %}
            </div>
            <div class="col-sm-4 betslip">
                <form>
                    <div class="form-group">
                        <h3>Bet Slip</h3>
                        <input class="buttonbottom" type="submit" value="Confirm Bet">
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock content %}

Image of my website

基本上，我想单击表格中的6个选项之一（赢，价差，总计），然后在表格右侧的投注单中显示选择，以便用户可以对所选的投注进行投注。这可能是一个问题的含糊之处，但是如果有人可以向我指出正确的方向，我将不胜感激。

Answer 1

当前，表格中的按钮什么也不做。如果要立即在“投注单”部分显示内容，而无需重新加载页面，则可以使用jQuery。这里没有django。

在“投注单”部分添加一个块以显示内容：

<div class="form-group">
  <h3>Bet Slip</h3>
  <div class="chosenEvents"></div>
  <input class="buttonbottom" type="submit" value="Confirm Bet">
</div>

然后添加一些点击事件处理：

$(".removebuttonstyling").click(function() {
  $(".chosenEvents").append($(this).text()); // Show content of chosen event
});

除了$(this).text()之外，您还可以传递任何您想要显示的值。但是，如果您想进一步提交表格。代替.chosenEvents块，您需要有一个表单字段。像这样：

<form name="myform" method="POST" action="view_url">
  <div class="form-group">
    <h3>Bet Slip</h3>
    <input type="number" class="chosenEventFieldValue">
    <input class="buttonbottom" type="submit" value="Confirm Bet">
  </div>
</form>

并且：

$(".removebuttonstyling").click(function() {
      $(".chosenEventFieldValue").val($(this).text()); // Use content of chosen event as form field value
    });

请确保要在页面上加载jQuery静态文件。

在按钮上单击，将数据从模型添加到新表单

1 个答案: