Question

当我点击表格行时，我需要一些帮助来填充文本框。

这是我的代码

<script>
    function moveNumbers(number){
        document.getElementById("teste").value=number;
    }
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
  <tr>
    <th>Type</th>
    <th>Serial Number</th>
    <th>VAD</th>
    <th>Date Added</th>
  </tr>

    {% for i in vlist %}
   <tr>
       <td onclick="moveNumbers(this.value)">{{ i.eqpttype }}</td>
       <td onclick="moveNumbers(this.value)">{{ i.serialnumber }}</td>
       <td onclick="moveNumbers(this.value)">{{ i.vad }}</td>
       <td onclick="moveNumbers(this.value)">{{ i.dateadded }}</td>
   </tr>
{% endfor %}
</table>
</div>
<form name="teste">
    <input id="teste" type="text">
</form>

使用这段代码，我的文本框中的'未定义'值（顺便说一下，我需要用我表中的每个信息填充一个文本框，所以在这个例子中有4个文本框）

提前致谢

Answer 1

更新了代码以排除模板内容，但无论如何，td元素没有value属性。您只需要获取textContent，并且为了更好的衡量标准，请使用trim()删除空格：

更新代码11/9基于澄清评论

<script>
    function moveNumbers(index, number){
        document.getElementById("teste" + index).value  = number;
    }
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
    <tr>
    <th>Type</th>
    <th>Serial Number</th>
    <th>VAD</th>
    <th>Date Added</th>
    </tr>

    
    <tr>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 1</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 2</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 3</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 4</td>
    </tr>
    <tr>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 1</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 2</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 3</td>
        <td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 4</td>
    </tr>

</table>
</div>
<form name="teste">
    <input id="teste0" type="text">
    <input id="teste1" type="text">
    <input id="teste2" type="text">
    <input id="teste3" type="text">
</form>

Answer 2

我找到了一种方法来做我想要的...检查下面的代码：

<script>
    function moveNumbers(number){
        var Row = document.getElementById(number.toString());
        var cells = Row.getElementsByTagName("td");
        document.getElementById("teste0").value=cells[0].innerText;
        document.getElementById("teste1").value=cells[1].innerText;
        document.getElementById("teste2").value=cells[2].innerText;
        document.getElementById("teste3").value=cells[3].innerText;
    }
</script>
</head>
<body>
<div id="table" style="width: 900px; height: 300px; overflow-x:auto">
<table id="listeqpt">
  <tr>
    <th>Type</th>
    <th>Serial Number</th>
    <th>VAD</th>
    <th>Date Added</th>
  </tr>
    {% set count = 1 %}
     {% for i in vlist %}
    <tr id={{ count }} onclick="moveNumbers(this.id)">
        <td>{{ i.eqpttype }}</td>
        <td>{{ i.serialnumber }} </td>
        <td>{{ i.vad }}</td>
        <td>{{ i.dateadded }}</td>
    </tr>
    {% set count = count + 1 %}
{% endfor %}
</table>
</div>
<form name="teste">
    <input id="teste0" type="text">
    <input id="teste1" type="text">
    <input id="teste2" type="text">
    <input id="teste3" type="text">
</form>

感谢您帮助我......请参阅

填充文本框以单击表格行

2 个答案: