表格元素会使用javascript串联过早关闭

时间：2018-10-28 19:33:04

标签： javascript html css

我正在尝试将javascript对象文字输出到HTML表中。由于我需要遍历对象，因此我将表头的创建分为一个函数，与从对象中迭代的表行相同，最后还有一个用于构建表脚的函数。然后，一个具有三行的自我执行函数执行这三个函数来构建我的完整表。

但是，问题是页脚的内部HTML放置在表的外部（在表的后面），并且根本不生成页脚元素。我已经遍历了多次代码，并且在合并中也看不到任何语法错误。我是否在代码中或执行本身中缺少某些内容（某些我不知道的经验法则或其他内容）？我的代码：

[>> Fiddle <<] 该代码附在下面，用于即时测试。

Javascript： 

var my_object = {
    prop1: ['<span class="mainItem">Item 1</span>', 220, 'show', 'count'],
    prop2: ['<span class="mainItem">Item 2</span>', 100, 'show', 'count'],
    get prop3() { //access with my_object.handledareutbildning
        return ['<span class="mainItem">Item 3</span>', this.prop3_1[1] + this.prop3_2[1], 'show', 'count'];
    },
    prop3_1: ['<span class="subItem">Item 3.1</span>', 300, 'show', 'noCount'],
    prop3_2: ['<span class="subItem">Item 3.2</span>', 300, 'show', 'noCount'],
    prop4: ['<span class="mainItem">Item 4</span>', 199, 'show', 'count'],
    get prop5() { //access with my_object.riskutbildning
        return ['<span class="mainItem">Item 5</span>', this.prop5_1[1] + this.prop5_2[1], 'show', 'count'];
    },
    prop5_1: ['<span class="subItem">Item 5.1</span>', 800, 'show', 'noCount'],
    prop5_2: ['<span class="subItem">Item 5.2</span>', 2000, 'show', 'noCount'],
    prop6: ['<span class="mainItem">Item 6</span>', 325, 'show', 'count'],
    get prop7() { //access with my_object.uppkorning
        return ['<span class="mainItem">Item 7 total</span>', this.prop7_1[1] + this.prop7_2[1], 'show', 'count'];
    },
    prop7_1: ['<span class="subItem">Item 7.1</span>', 800, 'show', 'noCount'],
    prop7_2: ['<span class="subItem">Item 7.2</span>', 400, 'show', 'noCount']
};

function itemRows() {
    let outputEl = document.getElementById("output");

    for (var key in my_object) {
        //if (my_object.hasOwnProperty(key)) {
        if (my_object[key][2] == 'show') { //the third value in the array of each prop!

            outputEl.innerHTML += '<tr><td class="left">' + my_object[key][0] + '</td><td class="right">' + my_object[key][1] + '</td></tr>';
        }
    }
}

function topRow() {
    let outputMainEl = document.getElementById("outputMain");
    outputMainEl.innerHTML += '<table><thead><tr><th class="leftHEAD">ToDo</th><th class="rightHEAD">Price</th></tr></thead><tbody id="output">';
}

function sumRow() {
    let outputMainEl = document.getElementById("outputMain");
    outputMainEl.innerHTML += '</tbody><tfoot><tr><td class="leftSUM">Sum:</td><td class="rightSUM">xxxx</td></tr></tfoot></table>';
}

(function renderContent() {
    topRow();
    sumRow();
    itemRows();

})();

HTML： 

<div id="outputMain"></div>

CSS： 

/*region Righteous Font Import*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900');
/*endregion*/

html {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

body{
    background: #191c1f;
}

table {
    border-spacing: 5px;
    border-collapse: separate;
}

.left, .right {
    padding: 5px;
    border-radius: 20px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM {
    border-radius: 5px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM, .mainItem {
    padding: 5px 15px;
}

.leftHEAD {
    background: hsl(192, 20%, 20%);
    color: #dcdcdc;
    text-align: left;
}

.rightHEAD {
    background: hsl(192, 20%, 20%);
    color: #dcdcdc;
}

.leftSUM {
    background: hsl(192, 20%, 20%);
    color: #dcdcdc;
    text-align: left;
}

.rightSUM {
    background: hsl(192, 20%, 20%);
    color: #dcdcdc;
}

.left {
    background: hsl(0, 0%, 20%);
    color: #dcdcdc;
}

.right {
    background: hsl(0, 0%, 40%);
    color: #dcdcdc;
    text-align:center;
}

.mainItem {
    font-weight: 400;
    color: hsl(0, 0%, 60%);
}

.subItem {
    padding: 5px 15px 5px 30px;
    color: hsl(0, 0%, 40%);
}


var my_object = {
	prop1: ['<span class="mainItem">Item 1</span>', 220, 'show', 'count'],
	prop2: ['<span class="mainItem">Item 2</span>', 100, 'show', 'count'],
	get prop3() { //access with my_object.handledareutbildning
		return ['<span class="mainItem">Item 3</span>', this.prop3_1[1] + this.prop3_2[1], 'show', 'count'];
	},
	prop3_1: ['<span class="subItem">Item 3.1</span>', 300, 'show', 'noCount'],
	prop3_2: ['<span class="subItem">Item 3.2</span>', 300, 'show', 'noCount'],
	prop4: ['<span class="mainItem">Item 4</span>', 199, 'show', 'count'],
	get prop5() { //access with my_object.riskutbildning
		return ['<span class="mainItem">Item 5</span>', this.prop5_1[1] + this.prop5_2[1], 'show', 'count'];
	},
	prop5_1: ['<span class="subItem">Item 5.1</span>', 800, 'show', 'noCount'],
	prop5_2: ['<span class="subItem">Item 5.2</span>', 2000, 'show', 'noCount'],
	prop6: ['<span class="mainItem">Item 6</span>', 325, 'show', 'count'],
	get prop7() { //access with my_object.uppkorning
		return ['<span class="mainItem">Item 7 total</span>', this.prop7_1[1] + this.prop7_2[1], 'show', 'count'];
	},
	prop7_1: ['<span class="subItem">Item 7.1</span>', 800, 'show', 'noCount'],
	prop7_2: ['<span class="subItem">Item 7.2</span>', 400, 'show', 'noCount']
};

function itemRows() {
	let outputEl = document.getElementById("output");

	for (var key in my_object) {
		//if (my_object.hasOwnProperty(key)) {
		if (my_object[key][2] == 'show') { //the third value in the array of each prop!

			outputEl.innerHTML += '<tr><td class="left">' + my_object[key][0] + '</td><td class="right">' + my_object[key][1] + '</td></tr>';
		}
	}
}

function topRow() {
	let outputMainEl = document.getElementById("outputMain");
	outputMainEl.innerHTML += '<table><thead><tr><th class="leftHEAD">ToDo</th><th class="rightHEAD">Price</th></tr></thead><tbody id="output">';
}

function sumRow() {
	let outputMainEl = document.getElementById("outputMain");
	outputMainEl.innerHTML += '</tbody><tfoot><tr><td class="leftSUM">Sum:</td><td class="rightSUM">xxxx</td></tr></tfoot></table>';
}

(function renderContent() {
	topRow();
	sumRow();
	itemRows();

})();
/*region Righteous Font Import*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900');
/*endregion*/

html {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

body{
	background: #191c1f;
}

table {
	border-spacing: 5px;
	border-collapse: separate;
}

.left, .right {
	padding: 5px;
	border-radius: 20px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM {
	border-radius: 5px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM, .mainItem {
	padding: 5px 15px;
}

.leftHEAD {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
	text-align: left;
}

.rightHEAD {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
}

.leftSUM {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
	text-align: left;
}

.rightSUM {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
}

.left {
	background: hsl(0, 0%, 20%);
	color: #dcdcdc;
}

.right {
	background: hsl(0, 0%, 40%);
	color: #dcdcdc;
	text-align:center;
}

.mainItem {
	font-weight: 400;
	color: hsl(0, 0%, 60%);
}

.subItem {
	padding: 5px 15px 5px 30px;
	color: hsl(0, 0%, 40%);
} 
<div id="outputMain"></div>

1 个答案:

答案 0 :(得分：0)

通过仅合并topRow()和sumRow()函数，而是使用由tableElement()和{中的两个字符串组成的一个HTML字符串创建一个topRow()函数来解决此问题{1}}函数（ 就是这样！ ）：

[>> Updated Fiddle <<] 该代码附在下面（并已更新）以进行即时测试。

sumRow()
var my_object = {
	prop1: ['<span class="mainItem">Item 1</span>', 220, 'show', 'count'],
	prop2: ['<span class="mainItem">Item 2</span>', 100, 'show', 'count'],
	get prop3() { //access with my_object.handledareutbildning
		return ['<span class="mainItem">Item 3</span>', this.prop3_1[1] + this.prop3_2[1], 'show', 'count'];
	},
	prop3_1: ['<span class="subItem">Item 3.1</span>', 300, 'show', 'noCount'],
	prop3_2: ['<span class="subItem">Item 3.2</span>', 300, 'show', 'noCount'],
	prop4: ['<span class="mainItem">Item 4</span>', 199, 'show', 'count'],
	get prop5() { //access with my_object.riskutbildning
		return ['<span class="mainItem">Item 5</span>', this.prop5_1[1] + this.prop5_2[1], 'show', 'count'];
	},
	prop5_1: ['<span class="subItem">Item 5.1</span>', 800, 'show', 'noCount'],
	prop5_2: ['<span class="subItem">Item 5.2</span>', 2000, 'show', 'noCount'],
	prop6: ['<span class="mainItem">Item 6</span>', 325, 'show', 'count'],
	get prop7() { //access with my_object.uppkorning
		return ['<span class="mainItem">Item 7 total</span>', this.prop7_1[1] + this.prop7_2[1], 'show', 'count'];
	},
	prop7_1: ['<span class="subItem">Item 7.1</span>', 800, 'show', 'noCount'],
	prop7_2: ['<span class="subItem">Item 7.2</span>', 400, 'show', 'noCount']
};

function itemRows() {
	let outputEl = document.getElementById("output");

	for (var key in my_object) {
		//if (my_object.hasOwnProperty(key)) {
		if (my_object[key][2] == 'show') { //the third value in the array of each prop!

			outputEl.innerHTML += '<tr><td class="left">' + my_object[key][0] + '</td><td class="right">' + my_object[key][1] + '</td></tr>';
		}
	}
}

function tableElement() {
	let outputMainEl = document.getElementById("outputMain");
	outputMainEl.innerHTML += '<table><thead><tr><th class="leftHEAD">ToDo</th><th class="rightHEAD">Price</th></tr></thead><tbody id="output"></tbody><tfoot><tr><td class="leftSUM">Sum:</td><td class="rightSUM">xxxx</td></tr></tfoot></table>';
}

(function renderContent() {
	tableElement();
	itemRows();

})();
/*region Righteous Font Import*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900');
/*endregion*/

html {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

body{
	background: #191c1f;
}

table {
	border-spacing: 5px;
	border-collapse: separate;
}

.left, .right {
	padding: 5px;
	border-radius: 20px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM {
	border-radius: 5px;
}

.leftHEAD, .rightHEAD, .leftSUM, .rightSUM, .mainItem {
	padding: 5px 15px;
}

.leftHEAD {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
	text-align: left;
}

.rightHEAD {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
}

.leftSUM {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
	text-align: left;
}

.rightSUM {
	background: hsl(192, 20%, 20%);
	color: #dcdcdc;
}

.left {
	background: hsl(0, 0%, 20%);
	color: #dcdcdc;
}

.right {
	background: hsl(0, 0%, 40%);
	color: #dcdcdc;
	text-align:center;
}

.mainItem {
	font-weight: 400;
	color: hsl(0, 0%, 60%);
}

.subItem {
	padding: 5px 15px 5px 30px;
	color: hsl(0, 0%, 40%);
}

相关问题
最新问题