个人中心
gpt4 book ai didi

javascript - 如何正确运行此脚本以在运行时显示表格？

转载 作者：行者123 更新时间：2023-11-28 10:28:58 24 4
gpt4 key购买 nike

我正在尝试使用脚本在运行时显示包含数据的表格。我从表头调用了脚本。是否可以从表头调用函数。

</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>

脚本是

    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");
            }
      }

输出只是标题。我无法将数据放入表中。

感谢您提前提出建议。

最佳答案

width="350px"

px是CSS。否px使用 HTML 属性时。

onload="start('dataTable');"

没有load事件于 <table> ，这永远不会被调用。放一个<script>表后的元素用于调用函数。

var data = new Array();

为了保持理智，请使用[]数组字面量语法:

var data= [
    {id: 1, name: 'Tamil', age: 23, dept: 'CSE'},
    ...
];

var id; [and name etc.]

你永远不会使用这些变量。声明var s 与对象的成员无关。

document.getElementById(tableID)

您将该变量命名为 dataTable不是tableID .

cell2.innerText = data[i].id;

innerText是一个非标准的 IE 扩展。考虑使用标准textContent首先属性(如果可用)，或者只使用普通的旧 cell2.appendChild(document.createTextNode(data[i].id)); ，它比任何一个都得到更广泛的支持。

element2.setAttribute("type", "button");

切勿使用getAttribute/setAttribute HTML 文档在 IE 中存在错误。相反，请使用 DOM Level 2 HTML 属性，无论如何，它们更容易阅读。 element2.type= 'button'; .

cell6.appendChild("element2");

这是一个字符串，而不是变量 element2 .

关于javascript - 如何正确运行此脚本以在运行时显示表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3583996/

24 4 0
文章推荐： javascript - “给我发推文”按钮 - JavaScript 按钮
文章推荐： javascript - Jquery - 使用 data() 按类对 div 进行排序
文章推荐： swift - 'str1.characters'的含义
文章推荐： javascript - LayerX/layerY 值不正确？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com