模板化使用jquery或javascript生成html
templatization using jquery or javascript to generate html
我正在创建一个长HTML表单,其中包含许多动态元素(添加'+' &'-')和使用jquery的.clone()方法,但我不是很满意。我想要的是点击'+',我会选择预定义的HTML,并替换一些部分,如'id/name',然后只是附加到现有的部分。这将使我的逻辑非常清晰。例如,我有下面的HTML,我克隆'+'点击并附加到现有的视图(这是工作良好)
<div class='row'>
<input id="ip_1" name="ip_1">
<input date... id="dt_1" name="dt_1">
<select ... id="sel_1">
<br>
<input with text ... id="ip_2">
</div>
我想要的是,我将把上面的html保存在javascript变量中然后只传递new_id, new_name或其他参数来获得新的html TT2, Jinja2或Angular会这样做,但我想保持它轻
function x(v, d, s, d2) = {
return '<div class='row'>
<input id="{{ v }}" name="{{ v }}">
<input date... id="{{ d }}" name="{{ d }}">
<select ... id="{{ s }}">
<br>
<input with text ... id="{{ d2 }}">
</div>'
}
有什么建议吗?
你可以让Javascript为你做所有的工作。下面的函数选取块中的最后一行,然后相应地更新各个元素。唯一的问题(我会让你自己解决)是,如果你不能在现有的块之间插入一个块。
function x(){
// get all row elements
var rows = document.getElementsByClassName('row');
var last = rows.length - 1;
//--- get current last element to duplicate
var clone = rows[last].cloneNode(true);
//--- get all the inputs with in the duplicate
var inp = clone.getElementsByTagName('input');
//-- update all the input elements
inp[0].id = inp[0].name = IncrementValue(inp[0].id);
inp[1].id = inp[1].name = IncrementValue(inp[1].id);
inp[2].id = inp[2].name = IncrementValue(inp[2].id);;
//--- get the select element
inp = clone.getElementsByTagName('select');
inp[0].name = IncrementValue(inp[0].id);
//--- append all to the main div
document.getElementsByTagName('body')[0].appendChild(clone);
}
function IncrementValue( str ) {
var v = str.split('_');
v[1]++;
return v.join('_');
}
对上面的脚本document.getElementsByTagName('body')[0]
进行了更改,需要为您的输入指向div容器。html需要一个按钮:<button name='add' onclick="x()"> + </button>
相关文章:
- Javascript生成的表单未提交
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 使用Javascript生成包含JSP的HTML
- JavaScript生成html格式的密码
- PHP 包括 Javascript 生成的文件名
- 有没有办法用客户端的javascript生成一个AmazonEC2实例
- 在选择更改时更改从外部javascript生成的flash播放器
- 用javascript生成json数组
- 将javascript生成的文件上传到服务器
- jQuery选择JavaScript生成的元素
- target=“_空白“;使用自定义javascript生成的html页面
- 在 Javascript 生成的列表中,如何将自定义属性添加到 标记
- 在动态表单的可见部分中,如何使用javascript生成所需的某些字段
- 如何从Java和Javascript生成相同的cookie(不加双引号)
- 如何在使用javascript生成的anchor标记上添加onclick事件
- Javascript - 当使用 Javascript 生成 HTML 元素时,Magnific Popup 不起作用
- 如何在我的javascript生成列表中的
- 部分中放置更多超链接
- 如何在 HREF 中回显 JavaScript 生成的值
- JavaScript生成一个可变长度的数字
- 如何处理:当图像被点击时,使用Javascript生成的相同图像