如何获取html表中选择行的值并使用javasricpt在输入文本中显示它们?

拉特里

如何单击 HTML 行然后在输入文本中显示该行的选择值?

我试过这样,但是即使我单击第二行,输入文本中只显示第一行的内容等等..

div class="col-md-1 col-md-1 col-xs-1"> 
    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal">...</button>    
       <!-- Modal -->
         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" scrollY:380>
            <div class="modal-dialog" role="document">
               <div class="modal-content">
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="myModalLabel">Category</h4>
                         </div>
                            <div class="modal-body">
                              <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                 <thead>
                                    <tr>
                                      <th>Id Event Category</th>
                                      <th>Event Category</th>
                                      <th>Description</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <% objLOV.forEach(function (lov) { %>
                                    <tr>
                                       <td id="field_id" onclick="myFunction()">                                                                                       
                                          <%= lov.id %>                                      
                                       </td>                                                                                  
                                       <td id="field_category" onclick="myFunction()">                                                                                       
                                          <%= lov.event_category %>                                                                                
                                       </td>                                                                                  
                                       <td id="field_description" onclick="myFunction()">                                                                                       
                                          <%= lov.description %>                                                                                
                                       </td>                                                                             
                                    </tr>
                                 <% }) %>
                              </tbody>
                              </table>

和我的 javascript

<script>
    function myFunction() {
        document.getElementById("id_type").value = document.getElementById("field_id").textContent.trim();
        document.getElementById("event_category").value = document.getElementById("field_category").textContent.trim();
        document.getElementById("description").value = document.getElementById("field_description").textContent.trim();
    }
</script>

"id_type" , "event_category" , "description" 是我的输入文本类型 ID

苏雷什·蓬努卡莱

应用click事件<tr>并将当前引用传递this给调用函数,如<tr onclick="callme(this)">. 从 javascript 获取当前行引用并找到其中的所有内容td现在使用获取值innerHTML并将其分配给相应的输入字段(“id_type”、“event_category”、“description”)。看下面的例子。

function callme(e)
{
  var tds=e.getElementsByTagName('td');
  document.getElementById("id_type").value = tds[0].innerHTML.trim();
  document.getElementById("event_category").value = tds[1].innerHTML.trim();
  document.getElementById("description").value = tds[2].innerHTML.trim();

}
<table>
<tr onclick="callme(this)">
  <td>test1</td>
  <td>something1</td>
  <td>content1</td>
</tr>
<tr onclick="callme(this)">
  <td>test2</td>
  <td>something2</td>
  <td>content2</td>
</tr>
<tr onclick="callme(this)">
  <td>test3</td>
  <td>something3</td>
  <td>content3</td>
</tr>
</table>

<input type="text" id="id_type" />
<input type="text" id="event_category" />
<input type="text" id="description" />

注意:根据我的评论,不要id对所有td. 您可以尝试使用class代替td. 对于当前的解决方案,它没有影响,但在功能上它会给你错误的信息,就像你的代码一样。重要的是id应该是独一无二的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何获取表中选择行的值并合并它们并在输入文本中显示它们?

来自分类Dev

如何从html中的表中选择行中的特定值

来自分类Dev

根据某些文本/值从Selenium中的表中选择行

来自分类Dev

如何从sql中的html文档中选择文本值?

来自分类Dev

如何从 JQuery 中的日期时间输入中选择/使用值?

来自分类Dev

如何从输入文本框的值动态添加HTML表中的表行

来自分类Dev

使用表中的值将文本输入转换为选择

来自分类Dev

如何使用javascript将选择中的值发送到html中的输入文本?

来自分类Dev

html选择列表-获取显示的文本值

来自分类Dev

如何从HTML中的代码选择中获取选定的值/文本

来自分类Dev

如何使用jquery从表中获取所有数据,包括输入和选择标签值?

来自分类Dev

从html表中选择一行(突出显示),并在单击按钮时发送值

来自分类Dev

从html表中选择一行(突出显示),并在单击按钮时发送值

来自分类Dev

使用jquery选择html表中输入元素的值

来自分类Dev

从mysql表中获取值并显示在下拉菜单中选择的值

来自分类Dev

如何显示在文本字段中选择的值?

来自分类Dev

如何从两个输入的“ =“文本”和文本区域中获取数据,然后在<li>中显示它们

来自分类Dev

如何从Datagirdview中选择“行”并在文本框中显示?

来自分类Dev

JS / JQuery:从文本输入中选择OR的值

来自分类Dev

如何从表中选择多个值并动态添加它们以选择另一列

来自分类Dev

如何在动态html表javascript中选择选项值。无法从jsp页面的数据库中获取更新的选项值

来自分类Dev

如何检查 firebase 实时数据库中的更改值并使它们显示在 html 表中?

来自分类Dev

如何从html表中选择行并获取第一个单元格的值并将其放在PHP Session上

来自分类Dev

从 Mysql 表中获取的 HTML 选择值

来自分类Dev

如何使用 stdin 和 stdout 获取输入并显示它们的总和

来自分类Dev

如何从表中选择行?

来自分类Dev

如何使用下拉列表选择在html中显示表

来自分类Dev

如何从多维数组中获取和操作值并按行显示它们

来自分类Dev

如何使用Selenium Python从html表中获取文本对象

Related 相关文章

  1. 1

    如何获取表中选择行的值并合并它们并在输入文本中显示它们?

  2. 2

    如何从html中的表中选择行中的特定值

  3. 3

    根据某些文本/值从Selenium中的表中选择行

  4. 4

    如何从sql中的html文档中选择文本值?

  5. 5

    如何从 JQuery 中的日期时间输入中选择/使用值?

  6. 6

    如何从输入文本框的值动态添加HTML表中的表行

  7. 7

    使用表中的值将文本输入转换为选择

  8. 8

    如何使用javascript将选择中的值发送到html中的输入文本?

  9. 9

    html选择列表-获取显示的文本值

  10. 10

    如何从HTML中的代码选择中获取选定的值/文本

  11. 11

    如何使用jquery从表中获取所有数据,包括输入和选择标签值?

  12. 12

    从html表中选择一行(突出显示),并在单击按钮时发送值

  13. 13

    从html表中选择一行(突出显示),并在单击按钮时发送值

  14. 14

    使用jquery选择html表中输入元素的值

  15. 15

    从mysql表中获取值并显示在下拉菜单中选择的值

  16. 16

    如何显示在文本字段中选择的值?

  17. 17

    如何从两个输入的“ =“文本”和文本区域中获取数据,然后在<li>中显示它们

  18. 18

    如何从Datagirdview中选择“行”并在文本框中显示?

  19. 19

    JS / JQuery:从文本输入中选择OR的值

  20. 20

    如何从表中选择多个值并动态添加它们以选择另一列

  21. 21

    如何在动态html表javascript中选择选项值。无法从jsp页面的数据库中获取更新的选项值

  22. 22

    如何检查 firebase 实时数据库中的更改值并使它们显示在 html 表中?

  23. 23

    如何从html表中选择行并获取第一个单元格的值并将其放在PHP Session上

  24. 24

    从 Mysql 表中获取的 HTML 选择值

  25. 25

    如何使用 stdin 和 stdout 获取输入并显示它们的总和

  26. 26

    如何从表中选择行?

  27. 27

    如何使用下拉列表选择在html中显示表

  28. 28

    如何从多维数组中获取和操作值并按行显示它们

  29. 29

    如何使用Selenium Python从html表中获取文本对象

热门标签

归档