定位textarea的特定行/行并附加该行

Question

我希望能够点击特定元素，并让它将值发送到textarea。但是，我希望它附加到textarea的特定行/行。

我正在尝试构建的内容与您在此网站上单击音柱板的音符时发生的情况非常类似：http://www.guitartabcreator.com/version2/实际上，我希望它与此几乎完全相同。

但是现在我真的只是想看看如何定位特定行，因为它看起来可以基于这个网站。

目前我正在使用javascript根据点击特定元素发送值。

这是js：

<script type="text/javascript">

function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
}

</script>

这是代表可点击元素的HTML：

<td><a href="#" onclick="addNote0('O','tabText'); return false;"> x </a></td>

这是textarea：

<textarea rows="6" cols="24" id="tabText" name="text">-
-
-
-
-
-</textarea>

这适用于发送值。但它显然只是进入下一个可用空间。当涉及到javascript时，我是一个全新的，所以我不知道从哪里开始尝试定位特定的行。

我目前可在此处查看：http://aldentec.com/tab/

工作代码：

经过一些帮助后，这是使这项工作的最终代码：

<script>

function addNote0(text,element_id) {
document.getElementById(element_id).value += text;


var tabTextRows = ['','','','','',''];

$('td').click(function(){
  var fret = $(this).index() - 1;
  var line = $(this).parent().index() -1;
  updateNote(fret, line);
});

function updateNote(fret, line){
  var i;
  for(i=0;i<tabTextRows.length;i++){
    if(i == line) tabTextRows[i]+='-'+fret+'-';
    else tabTextRows[i]+='---';
    $('#tabText').val(tabTextRows.join('\n'));
  }
}}

window.onload = function() {
  addNote0('', 'tabText');
};

</script>

Answer 1

试图只在JS中解决这个问题。

我在这里做的是使用数组来模拟文本字段的每一行（注意数组长度为6）。

然后我使用jQuery选择器在任何时候单击<td>元素时触发，该元素计算相对于HTML树点击的音品和字符串，然后调用updateNote函数。 （如果更改表格，解决方案可能会中断）。

在更新注释函数中，我遍历tabTextRows数组，添加适当的注释。最后，我将<textarea>的值设置为由＆＃39; \ n＆＃39;加入的数组。 （换行符char）。

在您关联的网站上为我工作。

此解决方案依赖于jQuery，因此请确保包含。

另外你应该考虑使用monospaced font，这样间距就不会搞砸了。

var tabTextRows = ['','','','','',''];

$('td').click(function(){
  var fret = $(this).index() - 1;
  var line = $(this).parent().index() -1;
  updateNote(fret, line);
});

function updateNote(fret, line){
  var i;
  for(i=0;i<tabTextRows.length;i++){
    if(i == line) tabTextRows[i]+='-'+fret+'-';
    else tabTextRows[i]+='---';
    $('#tabText').val(tabTextRows.join('\n'));
  }
}

Answer 2

我写了guitartabcreator网站。 Jacob Mattison是正确的 - 我正在使用文本区域进行显示。管理数据发生在后端。看到你的网站后，看起来你已经掌握了我的想法的基础知识。