[英]How to run this script correctly to display the table in runtime?
I am trying to display a table with data in runtime using script. 我正在尝试使用脚本在运行时显示包含数据的表。 I called the script from table header.
我从表头调用了脚本。 Is that possible to call a function from table header.
是否可以从表头调用函数。
</HEAD>
<BODY>
<TABLE id="dataTable" width="350px" border="1" onload="start('dataTable');">
<TR>
<THEAD>
<TR>
<TH>Select</TH>
<TH>Id</TH>
<TH>Name</TH>
<TH>Age</TH>
<TH>Dept</TH>
<TH>Option</TH>
</TR>
</THEAD>
</TABLE>
</BODY>
</HTML>
The Script is 脚本是
function start(dataTable) {
var data = new Array();
var id;
var name;
var age;
var dept;
data[0].id = "1";
data[0].name = "Tamil";
data[0].age = "23";
data[0].dept = "CSE";
data[1].id = "1";
data[1].name = "Tamil";
data[1].age = "23";
data[1].dept = "CSE";
data[2].id = "1";
data[2].name = "Tamil";
data[2].age = "23";
data[2].dept = "CSE";
for (var i = 0; i<data.length; i++)
{
var table = document.getElementById(tableID);
var rowCount = data.length;
var row = table.insertRow(rowCount);
//Check box
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
//ID Column
var cell2 = row.insertCell(2);
cell2.innerText = data[i].id;
//Name Column
var cell3 = row.insertCell(3);
cell3.innerText = data[i].name;
//Age Column
var cell4 = row.insertCell(4);
cell3.innerText = data[i].age;
//Dept Column
var cell5 = row.insertCell(5);
cell5.innerText = data[i].dept;
//Button Column
var cell6 = row.insertCell(6);
var element2 = document.createElement("input");
element2.setAttribute("type", "button");
element2.setAttribute("id", "dataRow"+id);
element2.setAttribute("value", "Edit");
cell6.appendChild("element2");
}
}
The output is just the Headers. 输出只是标题。 I cant get the data into table.
我无法将数据放入表中。
Thanks for suggestions in advance. 感谢您提前提出建议。
Just call your script in a <script>
tag after </table>
. 只需在
</table>
之后的<script>
标记中调用脚本。 Your script should be able to see the table elements because they're alreadyy loaded 您的脚本应该能够看到表格元素,因为它们已经被加载
width="350px"
宽度=“ 350px”
px
is CSS. px
是CSS。 No px
when using the HTML attribute. 使用HTML属性时没有
px
。
onload="start('dataTable');"
onload =“ start('dataTable');”
There is no load
event on <table>
, this will never be called. <table>
上没有load
事件,将永远不会调用它。 Put a <script>
element after the table to call the function. 在表后放置
<script>
元素以调用该函数。
var data = new Array();
var data = new Array();
For sanity, use []
array literal syntax: 为了保持理智,请使用
[]
数组文字语法:
var data= [
{id: 1, name: 'Tamil', age: 23, dept: 'CSE'},
...
];
var id;
var id; [and name etc.]
[和姓名等]
You never use these variables. 您永远不会使用这些变量。 Declaring
var
s has nothing to do with members of an object. 声明
var
与对象的成员无关。
document.getElementById(tableID)
document.getElementById(tableID)
You called that variable dataTable
not tableID
. 您称该变量为
dataTable
而不是tableID
。
cell2.innerText = data[i].id;
cell2.innerText = data [i] .id;
innerText
is a non-standard IE extension. innerText
是非标准的IE扩展。 Consider using the standard textContent
property first, if available, or just use plain old cell2.appendChild(document.createTextNode(data[i].id));
如果可以的话,请考虑首先使用标准的
textContent
属性,或者只使用普通的旧cell2.appendChild(document.createTextNode(data[i].id));
, which is supported more widely than either. ,这两种方法均得到广泛支持。
element2.setAttribute("type", "button");
element2.setAttribute(“ type”,“ button”);
Never use getAttribute
/ setAttribute
in an HTML document, there are bugs in it in IE. 切勿在HTML文档中使用
getAttribute
/ setAttribute
,因为IE中存在错误。 Instead use the DOM Level 2 HTML properties, which are easier to read anyway. 而是使用DOM Level 2 HTML属性,该属性无论如何都更易于阅读。
element2.type= 'button';
. 。
cell6.appendChild("element2");
cell6.appendChild(“ element2”);
That's a string, not the variable element2
. 那是一个字符串,而不是变量
element2
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.