将JavaScript函数与HTML分开

时间：2015-04-08 13:40:33

标签： 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)
}

在这种情况下我遇到错误： 未捕获的ReferenceError：未定义数据

1 个答案:

答案 0 :(得分：1)

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

相关问题
最新问题