canchas html

<button type="button" class="btn btn-primary" id="nueva-cancha-btn">Nueva cancha</button>

<table id="canchas-table" cellpadding="30" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Direccion</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<div class="modal fade" id="cancha-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Cancha</h4>
      </div>
      <div class="modal-body">
        <form>
          <input id="id" type="hidden" />
          <div class="form-group">
            <label for="nombre" class="control-label">Nombre:</label>
            <input type="text" class="form-control" id="nombre">
          </div>
          <div class="form-group">
                <label for="direccion" class="control-label">Direccion:</label>
                <input type="text" class="form-control" id="direccion">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" id="guardar-cancha-btn">Guardar</button>
      </div>
    </div>
  </div>
</div>