[英]Find, Replace and Append new dom elements
My goal is to go through a table and append a new <tr>
with the same data as it's previous sibling but with some altered content text. 我的目标是浏览一个表,并添加一个新的<tr>
,其数据与先前的兄弟姐妹相同,但内容文本有所更改。
A section of my html is as follows: 我的html的一部分如下:
<tr>
<td><label>Share - Spanish</label></td>
<td><input type="text" id="blog_share_es" name="blog_share_es" size="30" /></td>
</tr>
Within my current function in Javascript the $(this)
is the <label>
tag. 在我当前的Javascript函数中, $(this)
是<label>
标记。 I have successfully taken the word "Spanish" and replaced it with "Italian" with the following: 我已成功使用“西班牙语”一词,并用以下内容将其替换为“意大利语”:
var italian = $(this).text().replace("Spanish", "Italian");
and then append it to the table as follows: 然后将其追加到表中,如下所示:
var parentDiv = $(this).parent().parent();
$('<tr><td><label>'+italian+'</label></td><td><input type="text" id="logout_de" name="logout_de" size="30"/></td></tr>').insertAfter(parentDiv);
How do I now select the <input>
and replace all instances of "_es" within the id
and name
with "_it" so that I get the following output in html (getting the formatting of the html is not necessary but would be optimal!): 现在,我该如何选择<input>
并将id
和name
所有“ _es”实例替换为“ _it”,以便在html中获得以下输出(获取html的格式不是必需的,但将是最佳选择! ):
<tr>
<td><label>Share - Italian</label></td>
<td><input type="text" id="blog_share_it" name="blog_share_it" size="30" /></td>
</tr>
Turned into a plug-in 变成了插件
(function ($) {
$.fn.newRow = function (language, suffix) {
$lastSibling = this.find("tr").last().clone();
$label = $lastSibling.find("label");
$labelText = $label.text();
$label.text($labelText.replace($labelText.substring($labelText.indexOf("- ") + 2), language));
$input = $lastSibling.find("input");
$id = $input.attr("id");
$name = $input.attr("name");
$input.attr("id", $id.replace($id.substring($id.lastIndexOf("_") + 1), suffix))
.attr("name", $name.replace($name.substring($name.lastIndexOf("_") + 1), suffix));
this.find("tbody").append($lastSibling);
return this;
};
})(jQuery);
$("#yourTable").newRow("Italian", "it");
something like this... not sure if it 100% works, but gives you right direction 这样的事情...不确定它是否100%有效,但会为您提供正确的方向
$('input[type=text]').each(function(input) {
if (input.attr('id').match(/_it/))
input.attr('id', input.attr('id').replace(/_it/, '_es');
if (input.attr('name').match(/_it/))
input.attr('name', input.attr('name').replace(/_it/, '_es');
})
To select the input starting from $(this)
you have to use the function find()
, and then you can change the attributes using the function attr()
要选择从$(this)
开始的输入,必须使用find()
函数,然后可以使用attr()
函数更改属性。
var inp = $(this).parent().parent().find("input[type=text]");
inp.attr("id", inp.attr("id").replace("_es","_it"));
inp.attr("name", inp.attr("name").replace("_es","_it"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.