这是具有三个文本区域

Question

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

这是具有三个文本区域

的表的代码

<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>

这个想法是将3个文本移到数字记事卡上。 URL位于顶部，中间的直接注释和底部的学生注释。所有基本格式略有不同。这可能是一个onClick函数或使用三个更容易。请记住，如果我使用了三个函数，我将需要它们全部由同一事件触发。

Answer 1

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

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

只需给出相应的元素：

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

你的目标是这样的：

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

您可以在脚本标记中执行此操作：

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

触发它onClick for your elements。别忘了包含jQuery。

Answer 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());
}

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

Answer 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>

如何使用Javascript将文本区域中的文本移动到新表中？

这是具有三个文本区域

3 个答案: