javascript - 将 JavaScript 函数与 HTML 分开

标签 javascript html

我正在创建一些表格模型，我需要一个 HTML 文件，在其中设置需要显示的数据，以及一个(或多个)JS 文件来转换该数据并创建表格。当所有代码都在一个文件中时，一切都很好，但在尝试将其分离时遇到问题，所以我需要帮助。

<html>
<head>
<script>

var columns = ['address', 'city', 'name',  'state'];

var data = [
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'], 
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'], 
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],  
 ['2222 Some Street','San Francisco','John A. Smith','CA']  
];


//Set default number of items per page
var DEFAULT_NUMBER_OF_ITEMS_PER_PAGE = 20;
//Set default number of page
var DEFAULT_NUMBER_OF_PAGE = 1;
//Calculate total number of rows
var TOTAL_NUMBER_OF_ROWS = data.length;
//Function that create table header depending of data in list column
function setTableHeader(tableColumns){
    var i=0;
    tableColumns.forEach(function(entry){
        var column = document.createElement('th');
        column.id='column_'+i;
        column.innerHTML = '<a>'+entry+'</a>';
        var table = document.getElementById('table1');
        table.appendChild(column);
        i++;
    });
}

//Setting initial values for pagination variables
var itemsPerPage = DEFAULT_NUMBER_OF_ITEMS_PER_PAGE;
var page = DEFAULT_NUMBER_OF_PAGE;
var startRow = (page-1)*itemsPerPage;
var endRow = page*itemsPerPage;

//Function that sets values for pagination variables depending selection that user made
function setPaginationVariables(){
    itemsPerPage=document.getElementById("itemsPerPage").value;
    page=document.getElementById("pageNumber").value;
    if(page*itemsPerPage>TOTAL_NUMBER_OF_ROWS){
        page=DEFAULT_NUMBER_OF_PAGE;
        itemsPerPage=document.getElementById("itemsPerPage").value;
        startRow=DEFAULT_NUMBER_OF_PAGE;
        endRow=document.getElementById("itemsPerPage").value;
    }else{
        startRow = (page-1)*itemsPerPage;
        endRow = page*itemsPerPage;
    }
    generateTable(columns, data);
}

//Function that adds pagination on page
function addPagination(){
    document.body.innerHTML='<div id="itemsPerPageDiv"></div><div id="pageSelectionDiv"></div>'
    addItemsPerPage();
    addPageNumbers();
}

//Function that adds select field for items per page
function addItemsPerPage(){
    document.getElementById("itemsPerPageDiv").innerHTML='Items per page <select onchange="setPaginationVariables()" id="itemsPerPage"><option value="5">5</option><option value="10">10</option><option value="20">20</option></select>';
    document.getElementById("itemsPerPage").value=itemsPerPage;
}

//Function that adds select field for page numbers
function addPageNumbers(){
    var s = 'Pages <select id="pageNumber" onchange="setPaginationVariables()" >';
    for(i=1;i<TOTAL_NUMBER_OF_ROWS/itemsPerPage;i++){
        s+='<option value="'+(i)+'">'+(i)+'</option>'
    }
    s+='</select>';
    document.getElementById("pageSelectionDiv").innerHTML+=s;
    document.getElementById("pageNumber").value=page;
}   

//Function that generate rows
function generateRows(rowsData){
    var i=0;
    for(p=startRow; p<endRow;p++){
        var row = document.createElement('tr');
        row.id='row_'+i;
        var table = document.getElementById('table1');
        table.appendChild(row);
        fillRow(row.id , rowsData[p], i);
        i++;
    }
}

//Function that fill rows with data
function fillRow(row_id, rowData, rowNumber){
    var j=0;
    rowData.forEach(function(entry){
        var cell = document.createElement('td');
        cell.id='cell_'+rowNumber+'_'+j;
        j++;
        cell.innerHTML = '<a>'+entry+'</a>';
        var row = document.getElementById(row_id);
        row.appendChild(cell);
    });
}
//Function that generate table
function generateTable(columns, data){
    addPagination();
    var table = document.createElement('table');
    table.id = 'table1';
    document.body.appendChild(table);
    setTableHeader(columns);
    generateRows(data)
}

</script>
<style>
#table1{
width:auto; border: 1px solid black;
}

#table1 th{
border: 1px solid black
}

#table1 td{
border: 1px solid black
}
</style>

</head>
<body onload="generateTable(columns, data);">

</body>
</html>

事实上，我需要将列和数据保留在 HTML 文件中，并将其他所有内容保留在 JS 文件中。任何帮助或建议都会很棒。

这是我尝试过的:

文件1:index.html

<html>
<head>
<script src="Table_model.js"></script>
<script>
var columns = ['address', 'city', 'name',  'state'];
var data = [
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'], 
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'], 
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],  
 ['2222 Some Street','San Francisco','John A. Smith','CA']  
];
function test(){
    generateTable(columns, data);
}
</script>
<style>
#table1{
width:auto; border: 1px solid black;
}

#table1 th{
border: 1px solid black
}

#table1 td{
border: 1px solid black
}
</style>

</head>
<body onload="test();">

</body>
</html>

文件2:Table_model.js

//Set default number of items per page
var DEFAULT_NUMBER_OF_ITEMS_PER_PAGE = 20;
//Set default number of page
var DEFAULT_NUMBER_OF_PAGE = 1;
//Calculate total number of rows
var TOTAL_NUMBER_OF_ROWS = data.length;
//Function that create table header depending of data in list column
function setTableHeader(tableColumns){
    var i=0;
    tableColumns.forEach(function(entry){
        var column = document.createElement('th');
        column.id='column_'+i;
        column.innerHTML = '<a>'+entry+'</a>';
        var table = document.getElementById('table1');
        table.appendChild(column);
        i++;
    });
}

//Setting initial values for pagination variables
var itemsPerPage = DEFAULT_NUMBER_OF_ITEMS_PER_PAGE;
var page = DEFAULT_NUMBER_OF_PAGE;
var startRow = (page-1)*itemsPerPage;
var endRow = page*itemsPerPage;

//Function that sets values for pagination variables depending selection that user made
function setPaginationVariables(){
    itemsPerPage=document.getElementById("itemsPerPage").value;
    page=document.getElementById("pageNumber").value;
    if(page*itemsPerPage>TOTAL_NUMBER_OF_ROWS){
        page=DEFAULT_NUMBER_OF_PAGE;
        itemsPerPage=document.getElementById("itemsPerPage").value;
        startRow=DEFAULT_NUMBER_OF_PAGE;
        endRow=document.getElementById("itemsPerPage").value;
    }else{
        startRow = (page-1)*itemsPerPage;
        endRow = page*itemsPerPage;
    }
    generateTable(columns, data);
}

//Function that adds pagination on page
function addPagination(){
    document.body.innerHTML='<div id="itemsPerPageDiv"></div><div id="pageSelectionDiv"></div>'
    addItemsPerPage();
    addPageNumbers();
}

//Function that adds select field for items per page
function addItemsPerPage(){
    document.getElementById("itemsPerPageDiv").innerHTML='Items per page <select onchange="setPaginationVariables()" id="itemsPerPage"><option value="5">5</option><option value="10">10</option><option value="20">20</option></select>';
    document.getElementById("itemsPerPage").value=itemsPerPage;
}

//Function that adds select field for page numbers
function addPageNumbers(){
    var s = 'Pages <select id="pageNumber" onchange="setPaginationVariables()" >';
    for(i=1;i<TOTAL_NUMBER_OF_ROWS/itemsPerPage;i++){
        s+='<option value="'+(i)+'">'+(i)+'</option>'
    }
    s+='</select>';
    document.getElementById("pageSelectionDiv").innerHTML+=s;
    document.getElementById("pageNumber").value=page;
}   

//Function that generate rows
function generateRows(rowsData){
    var i=0;
    for(p=startRow; p<endRow;p++){
        var row = document.createElement('tr');
        row.id='row_'+i;
        var table = document.getElementById('table1');
        table.appendChild(row);
        fillRow(row.id , rowsData[p], i);
        i++;
    }
}

//Function that fill rows with data
function fillRow(row_id, rowData, rowNumber){
    var j=0;
    rowData.forEach(function(entry){
        var cell = document.createElement('td');
        cell.id='cell_'+rowNumber+'_'+j;
        j++;
        cell.innerHTML = '<a>'+entry+'</a>';
        var row = document.getElementById(row_id);
        row.appendChild(cell);
    });
}
//Function that generate table
function generateTable(columns, data){
    addPagination();
    var table = document.createElement('table');
    table.id = 'table1';
    document.body.appendChild(table);
    setTableHeader(columns);
    generateRows(data)
}

在这种情况下我遇到的错误: Uncaught ReferenceError :数据未定义

最佳答案

您需要确保，如果您将脚本移动到其他文件并从 HTML 页面链接到它们(如 Blazemonger 所解释的)，则所有内容仍按正确的顺序排列。 JavaScript 是一种解析语言而不是编译语言。您已在 HTML 页面中留下的 Script 标记之前链接到 .js 文件。在 .js 文件中，您引用在其他脚本标记中创建的 Data 变量。但 JS 还没有解析那部分代码，不知道里面有什么。

关于javascript - 将 JavaScript 函数与 HTML 分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29516334/

上一篇：javascript - 与 null-out 相比，delete 对 Object 效率低下，但对 DOM Element 的数据属性有效？

下一篇：javascript - 更多延迟动画

相关文章：

javascript - 刷新浏览器会覆盖 Firebase 中 child 的内容

javascript - 不匹配正则表达式

javascript - 循环时输出中额外的 + ； javascript

javascript - JavaScript 函数运行时 HTML 页面不更新

html - Spotify 的在线服务如何流式传输音乐以使其不可下载

javascript - 如何在 Google 云端硬盘选择器上显示文件夹而不显示私有(private)文件？

javascript - 在滚动父页面上显示 div 元素 css 或 javascript

javascript - 在模态对话框顶部显示元素

用于 Assets (样式表、JavaScript、图像等)的 HTML5 localStorage

javascript - 如何使用 JQuery 计算 div 内有多少个 id 以特定文本开头的 div？

©2024 IT工具网  联系我们