堆栈内存溢出
  简体   繁体   English

HTML表，从行中检索数据并将其显示在其他位置

[英]HTML Table, retrieving data from row and displaying it elsewhere

 原文  2017-06-09 20:47:02  4   3    javascript/ html/ datatables

问题描述

I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. 我正在尝试这样做，因此当您单击表中的一行时，根据您按的行，它将在另一个面板中显示该数据。 So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". 因此，当我单击第一行时，表中的数字将填写另一个面板中“读数”下的数字。 As well as the Name in the table, filling out the Name field under "Readings". 以及表格中的名称，在“读数”下填写名称字段。 How would I go about doing this? 我将如何去做呢？ 

<!-- begin row -->
<div class="row">
    <!-- begin col-2 -->
    <div class="col-md-2">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Table</h4>
            </div>
            <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="gradeA">
                            <td>1</td>
                            <td>First</td>
                        </tr>
                        <tr class="gradeA">
                            <td>2</td>
                            <td>Second</td>
                        </tr>
                        <tr class="gradeA">
                            <td>3</td>
                            <td>Third</td>
                        </tr>
                        <tr class="gradeA">
                            <td>4</td>
                            <td>Fourth</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end panel -->
    </div>


    <!-- begin col-2 -->
    <div class="col-md-6">
        <!-- begin panel -->
        <div class="panel panel-inverse" data-sortable-id="form-stuff-2">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Form</h4>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="/" method="POST">
                <legend>Readings</legend>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Number:</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" placeholder="1" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input type="device" class="form-control" value="Name here" />
                            </div>
                        </div>
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-10 -->


</div>
<!-- end row -->

3 个解决方案

解决方案1
 1 已采纳  2017-06-09 21:08:44

There you go pal 那你去朋友 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <!-- begin row -->
<div class="row">
    <!-- begin col-2 -->
    <div class="col-md-2">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Table</h4>
            </div>
            <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Number</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="gradeA">
                            <td>1</td>
                            <td>First</td>
                        </tr>
                        <tr class="gradeA">
                            <td>2</td>
                            <td>Second</td>
                        </tr>
                        <tr class="gradeA">
                            <td>3</td>
                            <td>Third</td>
                        </tr>
                        <tr class="gradeA">
                            <td>4</td>
                            <td>Fourth</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end panel -->
    </div>


    <!-- begin col-2 -->
    <div class="col-md-6">
        <!-- begin panel -->
        <div class="panel panel-inverse" data-sortable-id="form-stuff-2">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">Form</h4>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="/" method="POST">
                <legend>Readings</legend>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Number:</label>
                        <div class="col-md-8">
                            <input 
                                   type="text" 
                                   id="numberInput"
                                   class="form-control" 
                                   placeholder="Number" 
                                   disabled />
                        </div>
                    </div>
                    <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input 
                                       type="text" 
                                       id="deviceInput"
                                       class="form-control"     
                                       value="Name here" />
                            </div>
                        </div>
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-10 -->


</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {

  var table = document.querySelector('#data-table');
  var number = document.querySelector('#numberInput');
  var device = document.querySelector('#deviceInput');

  table.addEventListener('click', onTableClick);

  function onTableClick (e) {
    //console.log(e.currentTarget);
    var tr = e.target.parentElement;
    //console.log(tr.children);

    var data = [];
    for (var td of tr.children) {
      data.push(td.innerHTML)
    }

    number.value = data[0];
    device.value = data[1];

  }
})();
</script>
</body>
</html>

解决方案2
 0  2017-06-09 21:11:35

With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. 使用香草Javascript（有可以处理此问题的数据绑定库），表行确实具有单击事件。 So you can create a function that handles that click event. 因此，您可以创建一个处理该click事件的函数。

You can either use the onclick attribute or addEventListener method of HTML elements. 您可以使用HTML元素的onclick属性或addEventListener方法。 You can explicitly state the input to the function or calculate it. 您可以显式声明函数的输入或进行计算。 So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). 因此，假设函数名称为updateOther，则可以执行updateOther（1，'First'）或updateOther（this）。 The latter will pass the row element that was clicked and you can extract the pertinent information. 后者将传递被单击的行元素，您可以提取相关信息。

解决方案3
 0  2017-06-09 21:15:23

$(document).ready(function(){
        $(".gradeA").click(function(){
            var currentRow = this;
            var number = $(this).find("td")[0].innerText;
            var name = $(this).find("td")[1].innerText;
            $("form input[type='text']").val(number);
            $("form input[type='device']").val(name);
        })
    });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从sql数据库检索数据并将其显示在表中 - Retrieving data from a sql database and displaying it in a table 通过单击带有jquery和html的行从表中检索列值 - Retrieving column values from a table by clicking row with jquery and html 显示从会话到HTML表的数组数据 - Displaying array data from session to html table 显示动态 HTML 表中的数据 - Displaying Data From Dynamic HTML Table 将来自 firestore 的数据显示到 HTML 表中 - Displaying data from firestore into HTML table 在html表中展开/折叠div从数据库中检索数据 - Expand/Collapse div inside html table retrieving data from db 从HTML表中检索列 - Retrieving Column from HTML table 从父行获取html表数据 - getting html table data from parent row 从html表行填充数据 - Populating data from an html table row 清除表格html中一行的数据 - clear data from a row in a table html
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM