如何使用 Javascript 将文本从文本区域移动到新表格中？答案

【问题标题】：How would I move text from text areas into a new table using Javascript?如何使用 Javascript 将文本从文本区域移动到新表格中？
【发布时间】：2015-01-23 16:40:33
【问题描述】：

我只是在学习 Javascript，我们的讲师没有资格教授他一生中从未使用过任何形式的代码。我想要一个 onClick 事件来触发一个函数，它将专用表格中 3 个文本框的内容移动到一个新表格上的特定位置，以便打印。

这是包含三个文本区域的表格的代码：

<table>

    <tr>
        <td rowspan="2">
            <textarea rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
        </td>
        <td> <textarea rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
                    </td>
    </tr>
    <tr>
        <td> <textarea rows="15" cols="30">Additional notes should go in this box.</textarea>
        </td>
    </tr>

</table>

这个想法是将 3 段文本移动到数字记事卡上。 URL 位于顶部，直接注释位于中间，学生的注释位于底部。所有的基本格式都略有不同。这是否可以通过一个 onClick 功能实现，或者使用三个功能会更容易吗？请记住，如果我确实使用了三个函数，我需要它们都被同一个事件触发。

【问题讨论】：

获取输入/文本区域的value，find 表格元素并使用相同的函数设置它们的值。如果您想在任何元素上的 click 上执行此操作。请尝试在 SO 上发帖之前先进行研究。

标签： javascript function onclick dom-events buttonclick

【解决方案1】：

您可以使用 jQuery 并将内容从一个 HTML 节点复制/粘贴/删除到另一个节点：

$('#idOfYourTargetNode').text($('#idOfYourFirstNode').text());
$('#idOfYourFirstNode').empty();

给对应的元素一个like即可：

<td id="url">Content url ....</td>

你的目标是这样的：

<h1 id="headlineUrl"> URL Headline </h1>

你在脚本标签中这样做：

$('#headlineUrl').text($('#url').text());
$('#url').empty();

为您的元素触发它。不要忘记包含 jQuery。

【讨论】：

【解决方案2】：

首先，如果 textareas 有您可以引用的 id，那将是最简单的：

<tr>
<td rowspan="2">
    <textarea id="notes" rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
</td>
<td> <textarea id="address" rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
            </td>

附加说明应放在此框中。

然后，你可以这样做：

$("button").on("click", function() {
  $("#newlocation1").text($("#notes").text());
  $("#newlocation2").text($("#address").text());
  $("#newlocation3").text($("#additional").text());
}

尽管如此，您可以通过多种方式使用这些文本。

【讨论】：

【解决方案3】：

SOLUTION

var getValueBySelector = function(c){
  return document.querySelector(c).value;
};

var each = function(array, cb){
  for(var i=0; i<array.length; i++) cb.call(array[i], i, array[i]);
};

var concatenate = function(array, sep){
  var concat = [];
  each(array, function(){ 
    concat.push(getValueBySelector(this));
  });
  return concat.join(sep);
};

document.querySelector('.concat').innerHTML = concatenate(['.notes', '.url', '.add'], '<br>');

 <table>
      <tr>
        <td rowspan="2">
          <textarea class="notes" rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
        </td>
        <td> <textarea class="url" rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
        </td>
      </tr>
      <tr>
        <td> <textarea class="add" rows="15" cols="30">Additional notes should go in this box.</textarea>
        </td>
      </tr>
    </table>
    <div class="concat"></div>

【讨论】：