我现在正在使用响应/选择数据表来显示一些数据。当我点击表格中的任何一行时，我将如何制作它，它打开了＆＃34; col-md-6＆＃34;面板？如果没有选择任何行，则隐藏，然后在选择行时显示。
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<div id="menu-panel"></div>
<!-- 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">Digital Inputs</h4>
</div>
<div class="alert alert-info fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
Click on a Digital Input to edit its properties.
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Input</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>Digital Input 1</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Digital Input 2</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Digital Input 3</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Digital Input 4</td>
</tr>
<tr class="gradeA">
<td>5</td>
<td>Digital Input 5</td>
</tr>
<tr class="gradeA">
<td>6</td>
<td>Digital Input 6</td>
</tr>
<tr class="gradeA">
<td>7</td>
<td>Digital Input 7</td>
</tr>
<tr class="gradeA">
<td>8</td>
<td>Digital Input 8</td>
</tr>
<tr class="gradeA">
<td>9</td>
<td>Digital Input 9</td>
</tr>
<tr class="gradeA">
<td>10</td>
<td>Digital Input 10</td>
</tr>
<tr class="gradeA">
<td>11</td>
<td>Digital Input 11</td>
</tr>
<tr class="gradeA">
<td>12</td>
<td>Digital Input 12</td>
</tr>
<tr class="gradeA">
<td>13</td>
<td>Digital Input 13</td>
</tr>
<tr class="gradeA">
<td>14</td>
<td>Digital Input 14</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">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Digital Input Basic Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Digital Input:</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">Display Input:</label>
<div class="col-md-2">
<input type="checkbox" name="" value="" checked><br>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Signal Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Digital Input 1" />
</div>
</div>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button>
<button type="submit" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
App.restartGlobalFunction();
App.setPageTitle('Color Admin | Managed Tables - Select');
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() {
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() {
$.getScript('assets/js/table-manage-select.demo.min.js').done(function() {
TableManageTableSelect.init();
});
});
});
});
});
答案 0 :(得分：1)
您可以执行以下操作...例如，输入您的输入字段ID
数字输入：id="digital-input-number"和数字信号id="digital-input-name"，这里是代码......
$('.gradeA td').on('click',function(){
var text=[];
text = $(this).parent().find('td');
//console.log(text[0].innerText);
// console.log(text[1].innerText);
$("#digital-input-number").val(text[0].innerText);
$("#digital-input-name").val(text[1].innerText);
});
这段代码会动态地表示你的表的值，即你点击该行的一行数据就会转到我想要看到的表格。
答案 1 :(得分：0)
我没有看到任何JS，你应该自己尝试一下。我可以说的是，为了得到你需要的东西，你必须调用输入，并根据表格中选择的列，将这些值放在等于所选的值。
因此，如果您点击Digital Input 1，请将Digital Input的值设置为所选行但第一列。它将显示1。
然后，您只需要将所选列的值调用signal name，它就会显示Digital Input 1。
您的所有元素都没有id tags。
为此，您的行和列需要id tags。然后，您可以使用JS轻松获取id的innerHTML。
我希望这会有所帮助。