Question

我有一份作业表。在每一行中都有一个单元格，单击该单元格会在表格右侧显示一个隐藏的div。 div中包含一个表单，允许用户将所选文档与任务相关联。

目前，该表部分由PHP“for”循环生成;我循环遍历数组并为每个数组索引创建一个新的表行。

每行中有两个表格单元格。我希望其中一个单元格的内容是一个超链接，当单击时，将显示一个隐藏的div。在隐藏的div中将是一个表单。表单将有一个隐藏的输入框，我想在单击超链接时动态设置此值。

以下是该表的示例：

<table>
  <tr>
    <th>Task</th>
    <th></th>
  </tr>

  <?php
    for($i=0; $i<sizeof($task_array); $i++)
    { ?>
      <tr>
         <td><?php echo $task_array[$i]['task'];?></td>
         <td><a href="#" id="show_div">Attach Doc</a></td>
      </tr>
    }
  ?>
</table>

这是隐藏的div和形式：

<div id="hidden_div">
  <form action="[url]" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" />           
  <input type="hidden" id="task_id" value="">
  <input type="submit" name="submit" value="Submit" />
  </form>
</div>

我知道我可以使用JQuery执行以下操作来显示隐藏的div：

$("#hiddendiv").show();

我也知道可以使用

使用JQuery设置隐藏字段'task_id'

$("#task_id").val() = 'some value';

我遇到的问题是，由于值来自数组，我不知道如何指定特定值。例如，任务id的值可以在变量$ task_array [$ i] ['task_id']中找到。我可以试试这个：

$('#show_div').click(function(){
     $("#hiddendiv").show();
             $("#task_id").val() = ???
});

我有点不愿意指定使用任务id值的迭代。

如果不是很清楚，我道歉。任何帮助，将不胜感激。感谢。

Answer 1

PHP

  <?php
    for($i=0; $i<sizeof($task_array); $i++)
    { ?>
      <tr data-task-id="<?php echo $task_array[$i]['task_id'];?>">
         <td><?php echo $task_array[$i]['task'];?></td>
         <td><a href="#" id="show_div">Attach Doc</a></td>
      </tr>
    }
  ?>

请参阅我向data-attribute元素添加了一个名为data-task-id的{{1}}，该元素存储了该行的tr。我们稍后可以在task_id事件处理程序中使用它。

JS

click

请注意，//bind an event handler to the `tr` elements for the `click` event to show the `tr`s children elements (the `td`s) $('tr').on('click', function () { $(this).children().show(); //this next line is how we get the `task_id` associated with a row $(this).attr('data-task-id'); }); //since we bound an event handler to the `tr` elements for the `click` event it's a good idea to stop the propagation of click events on links within the `tr` elements so the event doesn't bubble up the the `tr` elements $('tr').find('a').on('click', function (event) { event.stopPropagation(); });是jQuery 1.7中的新功能，在这种情况下与.on()相同。

此外，您需要更改每个元素的.bind()元素的ID（ID 必须是唯一的）。我建议只将其更改为类而不是使用id：

#show_div

然后你可以像这样绑定一个事件处理程序：

<td><a href="#" class="show_div">Attach Doc</a></td>

使用JQuery动态设置值

1 个答案: