在表格行选择上填充表单文本区域 - Python Flask HTML答案

【问题标题】：Populate a form text area on table row selection - Python Flask HTML在表格行选择上填充表单文本区域 - Python Flask HTML
【发布时间】：2021-04-09 20:13:06
【问题描述】：

在基于 html 表格行选择填充文本区域方面需要帮助。

在下表中，我想提取所选行的“评论”列的内容，并写入同一页面上的文本区域“评论”。我只设法创建了表，没有别的。

下面是我现在从这个link 创建的代码。现在发生的情况是，只有当前选定的单元格被放入文本框中，而不仅仅是“评论”列。我只想在“评论”列中输入框，而不管在该行中单击的单元格如何。

<table id="table">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Comments</th>
        </tr>
   <tbody>
        <tr>
            <td>John</td>
            <td>42</td>
            <td>avery long comment</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>35</td>
            <td>another very long comment</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>54</td>
            <td>some comment</td>
        </tr>
   </tbody>
</table>


<script>
   var table = document.getElementById('table');
   var selected = table.getElementsByClassName('selected');
   table.onclick = highlight;

   function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
   
    var element = document.querySelectorAll('.selected');
    if (element[0] !== undefined) { //it must be selected
        document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
    }        
   }
</script>


<div >
    <textarea class="form-control" id="myTextbox"></textarea>  
</div>

感谢您的帮助。

【问题讨论】：

标签： javascript html python-3.x flask

【解决方案1】：

您将获得第一列，但您可以通过将子项的索引更改为 2 而不是 0 来获得带有评论的第三列。

document.getElementById("myTextbox").value = element[0].children[2].firstChild.data

【讨论】：