Question

我正在写一个基本上管理一系列事情的页面。每个东西都分配给一个人，分配由一个选择框完成，其中包含系统中每个用户的选项。（因此更改选择框会重新分配内容）。

所以说我的表中有100个对象，系统中有150个用户。如果我只做纯HTML，我将有15,000个选项标签

我认为必须有更好的方法来做到这一点。到目前为止，我的想法只是渲染第一个元素，然后用户jquery将选项复制到其他元素。或者我猜的另一个选择是让选项由AJAX填充，虽然这有点尴尬（我没有明显的地方，AJAX可以获得系统中的用户列表）。

任何想法都会受到欢迎：）

Answer 1

如何为选择提供某种弹出窗口。这样，您只需要select元素的一个实例及其options标记。

所以你基本上会让每个人都在一个列表中，一个只读输入字段和一个旁边的小按钮。如果用户单击此按钮，则会显示弹出窗口并让用户选择“对象”。关闭弹出窗口后，选择将传递到inputfield。

Answer 2

像

这样的东西

<form …>
  <table>
    <thead>
      <tr>
        <th>col1</th><th>col2</th><th>col3</th>
      </tr>
      <tr id="editrow" style="display:none">
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td>
          <select>
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
          </select>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr>
      <tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr>
      <tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr>
      <tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr>
      <tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr>
      <tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr>
    </tbody>
  </table>
</form>

将点击事件处理程序绑定到您

的tbody > tr > td

隐藏<tr>
从<td>和data-value属性中提取数据，以填充#editrow
如果＃{1}}中的#editrow显示其前面的<tbody>
在<tr>之后插入#editrow并将其显示为
<tr>获得点击事件的.focus()的输入元素
确保<td> #editrow内的更改在<tr>的{{1}}中相应更新（您应该使用委托事件。那么您只需要创建并绑定处理程序一次）

将提交事件处理程序绑定到

<td>

浏览<form>以构建数据映射（javascript对象...）
阻止使用tbody > tr
使用jQuery.ajax

或者您为.preventDefault()创建<input>并自然提交表单。建立地图并通过ajax发送它不那么痛苦，因为你不需要操纵数百个DOM元素。

如果没有javascript，此解决方案将无效。如果它必须在没有的情况下工作，那么你将无法通过数百个不断重复的<td>来充斥你的DOM。

避免在HTML中重复选择+选项

2 个答案: