如何在html的行之间折叠/展开数据

How to collapse/expand data between rows in html

本文关键字：折叠 数据 之间 html      更新时间：2023-09-26

我有这样的需求，我必须像这样首先显示数据，对于每一行展开/折叠按钮应该显示。

工作数据

           JobId    JobName   Descriptipn   Type
         -------------------------------------------
(+)(-)     1          A         ABC          Type1
(+)(-)     2          B         ABC          Type2

如果我单击扩展按钮，那么ajax方法将被调用并从DB加载作业及其相关数据。现在选中的职位数据应该显示在job1区域，这意味着，Job1行应该展开，job2,job3....约翰应该和以前一样。

如果我点击了job2，那么job1应该是折叠的，而job2应该是展开的。

我能够在上面显示一个表，但我无法实现这个展开/折叠功能。

所选作业的数据为大数据，大约有3,4个表。如此大的数据如何显示?

当我在谷歌中发现不建议在tr标签中使用div标签。

我的代码来了

   <table class="data">
        <thead>
            <tr>
                <th onclick="javascript:void(0);"><bean:message key="jsp.sp.jobs.jobData.jobNumber"/></th>
                <th onclick="javascript:void(0);"><bean:message key="jsp.sp.jobs.jobData.jobName"/></th>
                <th onclick="javascript:void(0);"><bean:message key="jsp.sp.jobs.jobData.jobDescription"/></th>
                <th onclick="javascript:void(0);"><bean:message key="jsp.sp.jobs.jobData.jobType"/></th>
            </tr>
        </thead>
        <% int i = 1; %>
        <tbody>
            <logic:iterate id="job" name="jobListe" type="com.abc.model.sp.job.JobVO">
                <bean:define id="pk" name="job" property="primaryKey"/>
                <bean:define id="rowClass">
                    <%=job.equals(serviceProtokollDRS.getSelectedJob()) ? 
                            "mark" : Globalerie.EVEN_OR_ODD[i]%>
                </bean:define>
                <tr class="<bean:write name="rowClass"/>" id="<bean:write name="pk"/>"
                    onclick="javascript:Job.select('<bean:write name="pk"/>');">
                    <td><bean:write name="job" property="jobNummer"/></td>
                    <td><bean:write name="job" property="jobName"/></td>
                    <td><bean:write name="job" property="desc"/></td>
                    <td><bean:write name="job" property="type"/></td>
                </tr>
                <% i = 1 -i; %>
            </logic:iterate>
        </tbody>
    </table>

他们没有使用jquery，只有javascript。

我将在每行下面创建一行，并使用div来保存展开的数据(使用colspan填充表的宽度)，然后在该单元格内构建内容。跟踪当前展开的单元格元素，这将允许您在扩展另一个单元格元素时轻松删除它。

这不是最干净的解决方案，但是如果没有像jQuery这样的库，你就没有很多选择。

var expanded = null;
expand = function(target, jobId) {
  // retrieve data for jobId
  if (expanded) {
    expanded.parentNode.removeChild(expanded);  
  }
  
  var dataRow = target.parentNode.parentNode.nextElementSibling,
      dataCol = dataRow.firstElementChild.nextElementSibling;
  
  appendData(dataCol, jobId);
};
collapse = function(target) {
  if (expanded) {
    var dataRow = target.parentNode.parentNode.nextElementSibling;
    if (expanded.parentNode.parentNode === dataRow) {
      expanded.parentNode.removeChild(expanded);
      expanded = null;
    }
  }
};
var appendData = function(cell, jobId) {
    var dataTable = document.createElement('TABLE'),
      tr = document.createElement('TR'),
      td = document.createElement('TD');
  var t = document.createTextNode("Job data for " + jobId);
  td.appendChild(t);
  tr.appendChild(td);
  dataTable.appendChild(tr);
  cell.appendChild(dataTable);
  
  expanded = dataTable;
}
th, td {
  padding: 5px;
}
.actionCol a {
  text-decoration: initial;
}
td table {
  border: 1px solid black;
  width: 100%;
}
<table class="table">
  <thead class="header">
    <th class="actionCol">
      <!-- empty for header -->
    </th>
    
    <th class="colHeader">
      Job ID
    </th>
    <th class="colHeader">
      Job Name
    </th>
    <th class="colHeader">
      Job Description
    </th>
  </thead>
  
  <tr class="row">
    <td class="actionCol">
      <a href="javascript:void(0)" onclick="expand(this, 'j-1');">+</a> |
      <a href="javascript:void(0)" onclick="collapse(this);">-</a>
    </td>
    <td class="colCell">
      j-1
    </td>
    <td class="colCell">
      Job 1
    </td>
    <td class="colCell">
      This is the first job
    </td>
  </tr>
  <tr class="data"><td></td><td colspan="3"></td></tr>
  
  <tr class="row">
    <td class="actionCol">
      <a href="javascript:void(0)" onclick="expand(this, 'j-2');">+</a> |
      <a href="javascript:void(0)" onclick="collapse(this);">-</a>
    </td>
    <td class="colCell">
      j-2
    </td>
    <td class="colCell">
      Job 2
    </td>
    <td class="colCell">
      This is the second job
    </td>
  </tr>
  <tr class="data"><td></td><td colspan="3"></td></tr>
</table>

相关文章：