1.绘制表格
<script language=javascript>
function show(){
var a=new Array('1','2','3');
var b=new Array('a','b','c') ;
var objTable=document.createElement("table")
var objTBody=document.createElement("tbody")
for(var i=0;i <a.length;i++)
{
var objTr=document.createElement("tr")
var objTd=document.createElement("td")
objTd.innerHTML=a[i]
objTr.appendChild(objTd);
var objTd=document.createElement("td")
objTd.innerHTML=b[i]
objTr.appendChild(objTd);
objTBody.appendChild(objTr)
}
objTable.appendChild(objTBody)
objTable.id="table6";
objTable.border="1";
objTable.style.width="555";
objTable.setAttribute("cellSpacing","1")
document.body.appendChild(objTable)
}
</script>
<body onload="show();">
</body>
2.绘制表格的js
function $$(tag)
{
return document.createElement(tag);
}
//绘制表格
function show(data){
var tb = document.all["spyj"].tBodies[0];
for (var i = 0;i < data.length; i++) {
var tr1 = createTR("审批人",data[i].auditUserName,"审批人所在部门",data[i].auditOrganName);
var tr2 = createTR("审批日期",data[i].auditTime,"审批结果",data[i].result);
var tr3 = createContentTR("审批意见",data[i].ideaContext,"");
var tr4 = createContentTR("","","all");
tb.appendChild(tr1);
tb.appendChild(tr2);
tb.appendChild(tr3);
tb.appendChild(tr4);
}
}
function createTR(k1,v1,k2,v2)
{
var tr = $$("tr");
var td1 = $$("td");
td1.innerText=k1;
var td2 = $$("td");
td2.innerHTML =v1;
td2.className ="four-content";
var td3 = $$("td");
td3.innerHTML =k2;
var td4 = $$("td");
td4.innerHTML =v2;
td4.className ="four-content";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;
}
function createContentTR(k1,v1,action)
{
if(action=="all")
{
var tr = $$("tr");
var td1 = $$("td");
td1.colSpan="4";
td1.style.height="10px";
tr.appendChild(td1);
return tr;
}else
{
var tr = $$("tr");
var td1 = $$("td");
td1.innerText=k1;
var td2 = $$("td");
td2.innerHTML =v1;
td2.className ="four-content";
td2.colSpan="3";
td2.style.height="100px";
tr.appendChild(td1);
tr.appendChild(td2);
return tr;
}
}
2.绘制表格的页面代码:
<table class="table-form" id="spyj">
</table>
分享到：
相关推荐
用js控制table列的显示隐藏 用js控制table列的显示隐藏
在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先，**无限滚动**是提高用户体验的一种常见技术，特别是在处理大量数据...
引用在table.js后面，把原来的下拉选择每页数量变为输入框输入
JavaScript 控制隐藏显示 TABLE 特定列 在 HTML 中，我们经常需要控制 TABLE 的显示和隐藏，特别是在数据表格中，需要根据用户的选择来显示或隐藏某些列。今天，我们将介绍使用 JavaScript 控制隐藏显示 TABLE 特定...
【标题】"VC6.0 SNMP 协议获取table值"是关于在Microsoft Visual C++ 6.0环境下，利用SNMP（简单网络管理协议）从远程设备获取表（table）数据的应用示例。SNMP是一种广泛用于网络设备管理的标准协议，它允许管理员...
本篇将详细介绍如何通过CSS来控制嵌套表格的边框，以及涉及`div嵌套table`时的外边框设置。 首先，我们需要理解表格的基本结构。一个HTML表格由`<table>`元素开启，包含`<tr>`（行）元素，`<td>`（单元格）或`<th>`...
本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下： 1、table代码 代码如下:<table id=”mytable” border=”0″ width=”1400″ align=”center” cellpadding=”3″...
CSS控制table表头
在ABAP编程中，表控制（Table Control）是一种强大的用户界面元素，用于显示和编辑数据库或内存中的数据。本章将深入探讨如何设计和使用表控制，包括通过向导创建和非向导式方法，以及如何实现数据表的维护和内表...
"方向键盘控制table内的input标签焦点"这一主题关注的是如何通过键盘导航提高用户在表格内输入数据的效率。在传统的网页交互中，用户通常通过鼠标点击来切换输入框的焦点，但通过键盘的上下左右箭头键进行导航能提供...
vxe-table是Vue.js中一款功能强大的表格组件，它为用户提供了丰富的表格操作功能，可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性，包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...
表格控制(Table Control)和步循环. 表格控制和步循环是用于屏幕表格显示的对象
var table = document.getElementById('your_table_id'); var newRow = table.insertRow(table.rows.length); ``` 2. **增加列：** 要增加列，我们需要在已有的行中插入`<td>`。可以遍历所有行，并对每一行调用`...
### JS 控制 Table 的 TR 变色 在 Web 开发中，通过 JavaScript 动态地改变表格 (`table`) 的样式是一种常见的操作。这种方式可以增强用户体验，使得数据展示更加直观、友好。本文将详细介绍如何利用 JavaScript 来...
1. **创建控制元素**：在Table上方或者侧边创建一个控制区域，通常是一个包含复选框或下拉菜单的面板，每个复选框或选项对应Table的一列。 2. **绑定事件**：给这些控制元素添加事件监听器，例如`click`事件，当...
本文将详细介绍如何通过CSS控制表格`<table>`的交替颜色，并提供具体的代码示例。 ### 一、基本原理 在HTML中，`<table>`元素用于创建表格，而`<tr>`代表表格的一行，`<td>`则表示表格中的一个单元格。CSS提供了...
总的来说，“bootstrap-table-export.js”和“tableExport.js”是增强Bootstrap表格功能的利器，它们简化了数据导出的过程，提高了用户体验，同时也为开发者提供了更灵活的控制选项。在处理大量数据并需要导出功能的...
在本主题中，我们将深入探讨如何利用AJAX来控制HTML表格（table）的内容显示方式，特别是在点击单元格时实现内容的编辑功能。 ### AJAX基础 AJAX允许在不刷新整个页面的情况下与服务器进行异步数据交换。它通过...
开发者通过自定义样式或者动态设置样式，实现了对单个单元格字体颜色的控制，以突出特定信息。 4. **选中行样式修改**：原组件的选中行样式可能较为单一，改版后开发者可能提供了更多的自定义选项，使得选中行的...
9. **数据分页**：为了便于处理大量数据，vxe-table内置了分页功能，用户可以轻松地控制每页显示的数据量，提高页面加载速度。 10. **模态窗口**：组件内嵌模态窗口功能，可以用于展示详细信息或进行弹窗操作，增强...