Question

我喜欢做的是：如果填写了3个可选字段中的任何一个，则会在源代码（表）中插入一大块代码（行），然后插入整个代码将输出。

我现在的问题是：如果输入了多个字段，则只插入最后一个输入。我需要插入所有插件。我怀疑＆＃34;代码=＆＃34;声明需要更改/重新定位，但不知道如何去做。我是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);

Answer 1

部分问题在于您尝试使用字符串替换来执行此操作。您应该使用正确的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>

Answer 2

看起来你正在失去第一次替换的结果，这是在变量＆＃34; code＆＃34;因为你用＆＃34; source＆＃34;的内容覆盖了它。在随后的替换中。

而不是：

code = source.replace("<!--PlaceHolder2-->", y );

试试这个：

code = code.replace("<!--PlaceHolder2-->", y );

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

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

2 个答案: