我喜欢做的是:如果填写了3个可选字段中的任何一个,则会在源代码(表)中插入一大块代码(行),然后插入整个代码将输出。
我现在的问题是:如果输入了多个字段,则只插入最后一个输入。我需要插入所有插件。我怀疑"代码="声明需要更改/重新定位,但不知道如何去做。我是javascript的初学者,所以请尽量保持你的答案基本。谢谢!!
HTML:
<input id="input1" onChange="update()">
<input id="input2" onChange="update()">
<input id="input3" onChange="update()">
的javascript:
var source = '<table><!--PlaceHolder1--><!--PlaceHolder2--><!--PlaceHolder3--></table>';
var insert = '<tr><td>InsertText</td></tr>';
function update(){
if(document.getElementById("input1").value != ""){
var x = document.getElementById("input1").value;
var y = insert.replace("InsertText", x );
code = source.replace("<!--PlaceHolder1-->", y );
}
if(document.getElementById("input2").value != ""){
var x = document.getElementById("input2").value;
var y = insert.replace("InsertText", x );
code = source.replace("<!--PlaceHolder2-->", y );
}
if(document.getElementById("input3").value != ""){
var x = document.getElementById("input3").value;
var y = insert.replace("InsertText", x );
code = source.replace("<!--PlaceHolder3-->", y );
}
}
document.write(code);
答案 0 :(得分:0)
部分问题在于您尝试使用字符串替换来执行此操作。您应该使用正确的DOM操作。这也可以让你清理你的代码:
window.onload = function() {
function update(e) {
var target = e.target,
num = target.getAttribute("data-num"),
td = document.querySelectorAll("#theTable td")[num - 1];
td.textContent = target.value;
td.parentNode.style.display = "table-row";
}
for (var i = 1; i <= 3; i += 1) {
document.getElementById("input" + i).onchange = update;
}
}
#theTable tr {
display: none;
}
<input id="input1" data-num="1">
<input id="input2" data-num="2">
<input id="input3" data-num="3">
<table id="theTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
答案 1 :(得分:0)
看起来你正在失去第一次替换的结果,这是在变量&#34; code&#34;因为你用&#34; source&#34;的内容覆盖了它。在随后的替换中。
而不是:
code = source.replace("<!--PlaceHolder2-->", y );
试试这个:
code = code.replace("<!--PlaceHolder2-->", y );
我认为你会得到你期待的东西。