Javascript - 在多个位置插入代码段

时间:2015-01-24 16:35:45

标签: javascript

我喜欢做的是:如果填写了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);

2 个答案:

答案 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 );

我认为你会得到你期待的东西。