Question

首先：我的问题是，通过DOM将行中的字符串插入到行的几个字段中，这些值在开头和结尾都会出现很多空格。

我想做什么：查找我双击的行中单元格的值，并将这些值放在表单的字段中。

HTML等同于：

<form>
  <fieldset>
    <legend> Very Important </legend>
    <label for="input_representing_all_the_inputs">
    <input id="input_representing_all_the_inputs"></input>
  </fieldset>
</form>

<table id="issue_table" class="sortable", border="1" >
  <tr ondblclick="values_into_form(issue_table)">
    <td>
      a value
    </td>
    <td>
      another one
    <td>
  </tr>
  <tr ondblclick="values_into_form(issue_table)">
    <td>
      here's also another value
    </td>
    <td>
      aaand one more.
    </td>
  </tr>
</table>

<table id="not_the_issue_table" class="sortable", border="1">
 [...] blabla looks similar [...]
</table>

现在我有了一个js函数来查找表中的值并将它们放入表单中。

function values_into_form( id ) {
  //find index of row with given id
  for (i = 0; i<= document.getElementById("accl_content").rows.lenght; i++){
    if ( document.getElementById("issue_table").rows[i].id == id) {
        var idx = i;
        break;
    }
  }

  // now insert the values into the editor-form
  document.getElementById("input_representing_all_the_inputs" =
    document.getElementById("issue_table").rows[idx].cells[0];
  // repeat the above for each input_field with the specific cell_idx.
  }
}

现在，让我们看一下issue_table的第一个。值是＆＃34;值＆＃34;。但是，输入字段将包含类似＆＃34;价值＆＃34;。

我为此制作了一个特定的错误吗？我不想要一个摆脱空白的解决方案，我想要一个真正的解决方案，想说，我根本不想让它们发生。

我对JS来说很新鲜，来自lua。因此，如果我做了一些概念上的错误，如果你能在旁注中告诉我，我会很高兴。

Answer 1

将您的HTML更改为：

<table id="issue_table" class="sortable", border="1" >
  <tr ondblclick="values_into_form(issue_table)">
    <td>a value</td>
    <td>another one<td>
  </tr>
  <tr ondblclick="values_into_form(issue_table)">
    <td>here's also another value</td>
    <td>aaand one more.</td>
  </tr>
</table>

这些空格是因为你的html中有空格。您当然可以使用javascript来删除开始和结束的空格。但如果您不想这样做，上述解决方案应该可行。

Answer 2

优良作法是分开 HTML 和 JavaScript 。

<强>的JavaScript ：

var myTable = document.getElementById("myTable");
var myInput = document.getElementById("myInput");
var td = myTable.getElementsByTagName("td");
for(var i = 0; i < td.length; i += 1) {
    td[i].addEventListener("dblclick", function() {
        myInput.value = this.innerHTML;
    });
}

Demo

行元素，这些空格来自何处？

2 个答案: