Question

当您点击表格中的某一行时，我试图这样做，根据您按哪一行，它会将该数据显示在另一个面板中。因此，当我单击第一行时，表格中的数字将填写另一个面板中的数字，在＆＃34;读数＆＃34;下。除了表格中的名称，填写＆＃34;读物＆＃34;下的名称字段。我该怎么做呢？

<!-- 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 -->

Answer 1

你去了朋友

<!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>

Answer 2

使用vanilla Javascript（有数据绑定库可以处理这个），表行确实有点击事件。因此，您可以创建一个处理该click事件的函数。

您可以使用HTML元素的onclick属性或addEventListener方法。您可以显式声明函数的输入或计算它。所以说函数名是updateOther，你可以做updateOther（1，'First'）或updateOther（this）。后者将传递被单击的行元素，您可以提取相关信息。

Answer 3

$(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);
        })
    });

HTML表格，从行检索数据并在其他地方显示

3 个答案: