时间戳

首页 > 解决方案 > 表元素使用 javascript 连接过早关闭

javascript - 表元素使用 javascript 连接过早关闭

问题描述

我正在尝试将 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>

标签： javascripthtmlcss

解决方案

topRow()通过合并and函数来修复它，sumRow()而不是创建一个tableElement()函数，其中一个 HTML 字符串由topRow()andsumRow()函数中的两个字符串组成（就是这样！）：

[>>更新小提琴<<] 代码附在下面（并更新）用于即时测试。

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%);
} 
<div id="outputMain"></div>

推荐阅读