Question

我有一个表单，在表单中有一个按钮，当我点击它时，它会显示一个弹出窗口，其中包含一个循环表。这意味着桌子没有固定的宽度，但具有固定的高度。基本上我的问题是如何实现这个结果，以便弹出窗口将根据表的内容自动调整大小，而无需用户调整它。我试着检查perfectpopups

调整弹出窗口大小以适合未知宽度的非图像内容

但我无法让它在我的页面中工作。我对此有点迟钝。

以下是我希望如何拍摄的照片。

FYI。每当有新数据时，该表将显示在下面。如何制作它以便它不会显示在下面。如果这是解决方案，只要在有新数据时它不会跳到下面，滚动水平也很好。基本上这就是桌子的样子。 enter image description here

HTML

<input type="button" value="Condition" onClick="window.open('{% url Condition_view dept_id patient_NO %}', '', 'width=500, height=200, menubar=0, resizable=0, scrollbars=yes, status=0, titlebar=0, toolbar=0')">

请帮忙。对我来说，最好的解决方案是什么？只要它可以在django中使用，我对所有解决方案都持开放态度。在这种情况下，我是一个更新鲜的人。非常感谢任何帮助。谢谢。

编辑问题

我的html表来自{％url Condition_view dept_id patient_NO％}页面

<body>

{% if conditioner%}
<div id ="patient_table" style="clear:both">
<form action="." method="post" onsubmit=""> 
{% csrf_token %}
<table border="1" id="thetable">
<thead>
  <tr>
  <th>Person_ID {{ patient_CPR }}</th>
  <th>Smoker</th>
  <th>Weight</th>
  <th>Height</th>
      </tr>
    </thead>
    <tbody>
{% for condition in conditioner %}
{% with "#CCE6FF" as bgcolor%} 
<tr>
   <td style="height: 30">{{ condition.NEW_DATE }}</td>
   <td>
   <select class="SMOKER" name="condition">
   <option value="{{condition.smoker.0.0}}"
   {% if condition.SMOKER == condition.smoker.0.0 %}selected="selected"{% endif %}>Never</option>
       <option value="{{condition.smoker.1.0}}" 
       {% if condition.SMOKER == condition.smoker.1.0 %}selected="selected"{% endif %}>Ex-smoker</option>
       </select>
   </td>
   <td><input type="text" name="condition" id="condition{{ forloop.counter }}" value="{{ condition.WEIGHT }}" /></td>
   <td><input type="text" name="condition" id="condition{{ forloop.counter }}" value="{{ condition.HEIGHT }}" /></td>
    </tbody>
 </table>
 <input type="submit" value="Save" />
 </form>
 </div>

 {% else %}
 <p>No patient.</p>
 {% endif %}

 </body>

希望有了这些信息，有人可以帮我解决我的问题。再次感谢。

Answer 1

更改onClick以调用函数，以便在函数

中设置宽度

HTML

<input onClick="openTableWindow('{% url Condition_view dept_id patient_NO %}')">

JS

function openTableWindow(url) {
    var windowWidth = /* get width of table*/
    var windowProperties = 'width=' + windowWidth + ', height=200, ......  toolbar=0';
    window.open(url, '', windowProperties);
}

将自动调整大小宽度表显示为弹出窗口

1 个答案: