0

在前端工作不多，想知道我所做的是否正确。
我创建了一个html显示数据的表。
我添加了按钮和复选框来在结构上修改表，即添加一行。
执行此操作的代码是一大块代码，它执行以下操作： 

var table = document.getElementById('table');  
table.insertRow(1);  

var id_td = document.createElement('td');  
//create options element  
id_td.appendChild(options);  

var name_td  = document.createElement('td');  
//create input textbox  
name_td.appendChild(txt_box);   

etc etc

所以我不喜欢这样一个事实，即创建元素的本质上是重复代码的一大块。
我想知道，我在正确的轨道上吗？除非我们使用类似的库，否则这是唯一的方法JQuery吗？

4

2 回答 2

1

我不喜欢这样一个事实，即创建元素的本质上是重复代码的一大块

为什么不给冗长的函数名起别名呢？

var gid = function (id) {return document.getElementById(id);}, // so short!
    ce = function (e) {return document.createElement(e)}, // ce(tag) is easy!
    td = function () {return ce('td');}, // td() now makes a new `<td>`
    ap = function (p, c) {return p.appendChild(c), p;}; // return more useful

现在“大块”是

var table = gid('table'),
    row = table.insertRow(1);

var id_td = td(), options = ce('select');
ap(id_td, options);

var name_td  = td(), txt_box = ce('textarea');
ap(name_td, txt_box);

// etc etc
于 2013-06-03T20:51:39.603 回答
1

VanillaJS 方法

你可以使用类似的东西

var table = document.getElementById('table');  
table.innerHTML = "<tr><td id="+id+"></td><td class="name"></tr>";

将您的标记添加为字符串，这最终可能会更清晰。很难准确地说出你是如何重复自己的，但你可以把它抽象成一个函数

图书馆

虽然有很多库可以抽象出这种丑陋。jQuery 就是其中之一，但类似​​knockoutjs的东西可能更适合您。

它允许您定义数据模型并将 html 模板绑定到该数据模型并自动更新。因此，您可以将您的数据定义为 JSON 对象并将其反映在 DOM 中，未来的更新只需触及视图模型对象，根本不必处理 DOM 函数。

于 2013-06-03T20:39:34.747 回答