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

我有这样一个要求，我必须像这样首先显示数据，因为每行的展开/折叠按钮都应该显示

工作数据

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

若我单击expand按钮，那个么将调用一个ajax方法，并从DB加载作业及其相关数据。现在，所选作业数据应显示在job1区域中，这意味着， job1行应展开，job2、job3…jobn应与前面相同

如果我点击了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=函数（目标，作业ID）{
//检索jobId的数据
如果（扩展）{
expanded.parentNode.removeChild（已展开）；
}
var dataRow=target.parentNode.parentNode.nextElementSibling，
dataCol=dataRow.firstElementChild.nextElementSibling；
附录数据（数据列、作业ID）；
};
折叠=功能（目标）{
如果（扩展）{
var dataRow=target.parentNode.parentNode.nextElementSibling；
if（expanded.parentNode.parentNode==数据行）{
expanded.parentNode.removeChild（已展开）；
扩展=空；
}
}
};
var APPENDATA=函数（单元格，作业ID）{
var dataTable=document.createElement（'TABLE'），
tr=document.createElement（'tr'），
td=document.createElement（'td'）；
var t=document.createTextNode（“作业数据为”+jobId）；
td.儿童（t）；
tr.appendChild（td）；
dataTable.appendChild（tr）；
cell.appendChild（数据表）；
扩展=数据表；
}

th，td{
填充物：5px；
}
a.行动{
文字装饰：首字母；
}
td表{
边框：1px纯黑；
宽度：100%；
}

工作ID
职务名称
职位描述
|
j-1
工作1
这是第一份工作
|
j-2
工作2
这是第二份工作

谁说您只能使用

创建表P