图像网格模板并选择

时间:2018-05-27 16:24:09

标签: javascript html django

我正在与Django合作的网站上工作,我想创建一个页面:

  1. 有一个列出模型所有图像的表格
  2. 有两个可用空间,两个显示用户选择的图像
  3. 实施例: image grid display

    目前,在我的模板中,我生成了这样的表:

              <table class="table table-striped table-advance table-hover">
              <tr>
                  <th>Field 1</th>
                  <th>Field 2</th>
                  <th>Field 3</th>
              </tr>
              {% for imagemodel in imagemodel %}
              <tr> 
                  <td>{{ imagemodel.image }}</td>
                  <td>{{ imagemodel.date_taken }}</td>
                  <td>{{ imagemodel.image.url }}</td>
              </tr>
              {% endfor %}
          </table>
    

    我不知道什么是让我的愿望变得可行的最好方法:

    • 是否可以仅使用javascript执行此操作?还是只有html?
    • 我应该通过我的django视图吗?

    非常感谢你的帮助,我迷路了:/

    干杯。

1 个答案:

答案 0 :(得分:0)

我发现我的解决方案纯javascript:

        var image1 ='';
    var tbl = document.getElementById("galleryTable");

    if (tbl != null) {

        for (var i = 0; i < tbl.rows.length; i++) {

            for (var j = 2; j < tbl.rows[i].cells.length; j++)

                tbl.rows[i].cells[j].onclick = function () { getval(this); };
        }

    }

    function getval(cel) {
        image1 = tbl.rows[cel.parentNode.rowIndex].cells[2].innerHTML;        
        document.getElementById("2x2_topleft_image_tag").src=image1;
      }