html

html

关注
发信
关注(28)粉丝(399)

javascript - 将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：未定义数据

最佳答案

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

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

10-12 13:07
Powered by LMLPHP ©2024 html 0.032845