- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我想在 Angular
中使用 jquery
根据我的数据输入创建一个表。我是 jquery
的新手,所以这可能是我忘记的一些愚蠢的东西,但我不能说它是什么。
可悲的是,当我执行 ng serve
时,什么也没有发生,只是一个空白页面。
我得到了以下代码:
HTML
<body onLoad="createHeaders('#dataTable')">
<table #dataTable >
</table>
</body>
TS
import { Component, OnInit } from '@angular/core';
import { MOCKUP } from '../Table';
import * as $ from "jquery";
@Component({
selector: 'app-tabular',
templateUrl: './tabular.component.html',
styleUrls: ['./tabular.component.css']
})
export class TabularComponent implements OnInit {
constructor() { }
ngOnInit() {
}
//this is where i want to work in the future, lets just forget about that for the moment
buildHTMLTableCodeFromTree(selector) {
//var header = this.createHeaders(selector, MOCKUP.Head);
$(selector).append("<td>test</td>");
}
createHeaders(selector) {
var headObject = MOCKUP.Head;
console.log("Er ist in der Methode!");
var value;
var colspan;
var entry = "";
for (var j = 0; j < headObject.length; j++) {
entry = entry + "<tr>";
for (var i = 0; i < headObject[j].length; i++) {
value = headObject[j][i].value;
colspan = headObject[j][i].colspan;
entry = entry + "<th colSpan='" + colspan + "'>" + value + "</th>";
}
entry = entry + "</tr>";
}
$("dataTable").append(entry);
}
}
table 头模型:
export const MOCKUP = {
"Table": "tab1",
"Head": [
[
{
"value": "",
"colspan": 1,
},
{
"value": "2018",
"colspan": 2
},
{
"value": "2019",
"colspan": 6
}
],
[
{
"value": "",
"colspan": 1,
},
{
"value": "December",
"colspan": 2
},
{
"value": "January",
"colspan": 2
},
{
"value": "February",
"colspan": 2
},
{
"value": "March",
"colspan": 2
}
],
[
{
"value": "",
"colspan": 1,
},
{
"value": "Foo",
"colspan": 1,
},
{
"value": "Boo",
"colspan": 1,
},
{
"value": "Foo",
"colspan": 1,
},
{
"value": "Boo",
"colspan": 1,
},
{
"value": "Foo",
"colspan": 1,
},
{
"value": "Boo",
"colspan": 1,
},
{
"value": "Foo",
"colspan": 1,
},
{
"value": "Boo",
"colspan": 1,
}
]
],
"Body": [
[
{
"value": "Total",
"entryID": -1
},
{
"value": "10",
"entryID": 33
},
{
"value": "24",
"entryID": 34
},
{
"value": "66",
"entryID": 35
},
{
"value": "0",
"entryID": 36
},
{
"value": "23",
"entryID": 37
},
{
"value": "24",
"entryID": 38
},
{
"value": "21",
"entryID": 39
},
{
"value": "10",
"entryID": 40
}
],
[
{
"value": "Row1",
"entryID": -1
},
{
"value": "10",
"entryID": 1
},
{
"value": "12",
"entryID": 2
},
{
"value": "0",
"entryID": 3
},
{
"value": "0",
"entryID": 4
},
{
"value": "0",
"entryID": 5
},
{
"value": "0",
"entryID": 6
},
{
"value": "0",
"entryID": 7
},
{
"value": "0",
"entryID": 8
}
]
]
}
我希望它是一个三行标题(年、月和我的 HEAD
数组最后一个值的最后一行)。我试着按照
我也试过按照描述的那样做 here (所以 $("#dataTable").append(entry);
但这不会改变结果。
编辑:确实存在错误,不是在执行 ng serve
的命令提示符中,而是在 Chrome 控制台中:
Uncaught ReferenceError: createHeaders is not defined at onload (localhost/:13)
显然他在执行 HTML 代码时没有实例化该方法。
编辑: 为什么我要尝试使用 jquery?注意:这可能不是问题本身所必需的,它只是一种解释
这是我的数据示例:
和期望的输出:
现在输出必须是可编辑的,并且这些编辑应该保存在我的数据库中(单击按钮时,这就是我将 entryID 保存在模型中的原因)。
对于Backend->Frontend的通信,我想到了上面的原始数据格式(这就是为什么我保存了一个entryID):
最佳答案
但是,如果您想要非常快的东西,最好不要使用 jQuery 并尽可能多地重用您生成的对象。
<table id="dataTable"></table>
const MOCKUP = [{
type: 'thead',
children: [{
type: 'tr',
dataset: {id: 1},
children: [
{type: 'th', textContent: '', colSpan: 1, contentEditable: true},
{type: 'th', textContent: '2018', colSpan: 2, contentEditable: true},
{type: 'th', textContent: '2019', colSpan: 6, contentEditable: true}
]
}, {
type: 'tr',
dataset: {id: 2},
children: [
{type: 'th', textContent: '', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'December', colSpan: 2, contentEditable: true},
{type: 'th', textContent: 'January', colSpan: 2, contentEditable: true},
{type: 'th', textContent: 'February', colSpan: 2, contentEditable: true},
{type: 'th', textContent: 'March', colSpan: 2, contentEditable: true}
]
}, {
type: 'tr',
dataset: {id: 3},
children: [
{type: 'th', textContent: '', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Foo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Boo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Foo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Boo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Foo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Boo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Foo', colSpan: 1, contentEditable: true},
{type: 'th', textContent: 'Boo', colSpan: 1, contentEditable: true}
]
}]
}];
const cache = {};
function assign(destination, source) {
for (const key in source) {
if (source.hasOwnProperty(key)) {
const value = source[key];
if (typeof value === 'object') {
assign(destination[key], value);
} else if (null != destination) {
destination[key] = value;
}
}
}
return destination;
}
function get(data, pathStr) {
const path = pathStr.split('.');
let i = path.length;
while (--i) {
data = data[path[i]];
}
return data;
}
function disassemble(target) {
let element;
while ((element = target.lastElementChild)) {
target.removeChild(element);
disassemble(element);
const type = element.tagName.toLowerCase();
const c = cache[type] || (cache[type] = []);
c.push(element);
}
}
function assemble(target, path, data = []) {
const fragment = document.createDocumentFragment();
data.forEach(({type, children, ...config}, i) => {
const element = assign(cache[type] && cache[type].pop() || document.createElement(type), config);
const newPath = `.${i}${path}`;
element.dataset.path = newPath;
assemble(element, `.children${newPath}`, children);
fragment.appendChild(element);
});
target.appendChild(fragment);
}
function render(target, data) {
window.requestAnimationFrame(() => {
disassemble(target);
assemble(target, '', data);
});
}
const table = document.getElementById('dataTable');
table.addEventListener('input', ({target: {dataset, textContent, parentElement}}) => {
// use this to update local data
get(MOCKUP, dataset.path).textContent = textContent;
// easy access to row id (dataset values can only be strings)
parentElement.dataset.id
// raw dataset with all types and deep objects intact
get(MOCKUP, parentElement.dataset.path).dataset.id
});
render(table, MOCKUP);
不如 React 快,但非常接近。
关于jquery - 使用 jquery 填充 html 表数据失败 Uncaught ReferenceError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53300824/
你好我是 Angular JS 的初学者,当我开始创建模块和 Controller 时,我无法打印我的消息,下面是我的代码 var myModule = angular.module("myFirst
我对 JQuery 还是个新手,我正在尝试使用它遍历 JSON 数组并使用数组中的数据更新我的网页。 JSON 文件如下所示: [ { "firstname":"John",
我正在使用 AngularJS 1.3.5,我正在尝试从 json 文件中获取信息。这是我的代码:HTML 文件: {{da
我正在创建 Bootstrap 模板。我收到两个错误,我不知道自己做错了什么。当我搜索类似的问题时,似乎是脚本错乱了,但我认为它们的位置是正确的。 两个错误: 未捕获的 ReferenceError:
我试图用子菜单制作导航栏,但我一直收到 dropMenu 未定义,当我将鼠标悬停在两个巴黎链接上时,我收到 Uncaught TypeError: Cannot read property 'styl
我正在尝试在名为 UserComponent 的 Angular 组件上运行 karma 测试。在此组件中,我有一个 ngOnInit 执行此操作: ngOnInit() { const
当我启用 login.spec.ts 测试时,对于不同的测试,我总是随机收到此错误。未捕获错误:未捕获( promise ):错误:无法匹配任何路由。 URL 段:“注销” 我尝试使用以下方法伪造 a
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ,确保 Controller 文件
在 AWS Elastic Beanstalk 上部署应用程序后会发生此错误。构建和部署成功,所有模块都正常工作,除了一个显示上述 super 表达式错误的模块。一切似乎都在本地机器上正常工作,甚至可
我刚刚开始使用 Node.js 并尝试使用模块。我已经安装了 Node 和 npm,并确保一切顺利。我将在下面添加代码来向您展示我得到了什么。 我有两个 js 文件,它们在这里。 app.js: va
在 Android 4.4.2 KitKat (API 19) 模拟器上运行时,我的代码出现问题... 当我在 Android 4.3 (API 18) 模拟器上模拟我的项目时,它正常工作并使用 Ma
function more(){ var MoreDetails = document.getElementById('MoreDetails'); More
我正在练习 Javascript,并且有以下代码,该代码在 sets[i][j] = initial_sets [i ][j]; 行。这个想法似乎是正确的,但我不明白为什么会出现错误。 var set
$(document).ready(function(){ $('#name').val('Name1'); }); function clickMe(){ console.lo
我正在创建一个网络应用程序,但我遇到了一个无法解决的简单问题。我已将产生问题的代码放在这里:http://jsfiddle.net/rkumarnirmal/5w3FG/ 应该显示此答案的第二个ale
我正在执行一项长时间运行的任务,在中间的某个位置,可能会抛出此异常: Uncaught DOMException: Blocked a frame with origin "http://localh
我试图通过使用 HTML5 中的 onEnded 属性一首接一首地播放 3 首歌曲。这是我的第一次尝试,但出现错误。 错误: Uncaught ReferenceError: src is not d
检查 Fiddle 以查看发生的故障。 当我将数据(即使我将其留空)添加到文本框并尝试单击“添加”时,它没有执行任何操作。 打开 Chrome 和 Firefox 控制台都给我同样的错误,它说“cha
这个问题在这里已经有了答案: How to access the correct `this` inside a callback (13 个回答) 关闭5年前。 您好,这是我的(快捷方式)示例代码:
我正在处理一个项目,每次 Node 运行我的代码时,浏览器控制台都会给我这个: Uncaught TypeError: Failed to resolve module specifier "expr
我是一名优秀的程序员,十分优秀!