Question

我正在使用Grails和HTML开发一个项目。我的页面中有一个表格和一个空白div。我正在尝试根据表中单击的行显示此div中的信息。我尝试了很多方法，但似乎都没有。有人可以帮忙吗？

<div class="table-responsive" id="div1" style="width:330px; height:400px; background-color:#F5F5F5; float:right; ">
</div>
<table class="table table-striped" id="table">
    <thead>
        <tr onclick="func1(this)">
        <th>OS</th>
        <th>Mount</th>
        <th>Size</th>
        </tr>
    </thead>
    <tbody>
        <tr onClick="func1(this)">
            <td>Windows1</td>
            <td>D:</td>
            <td>50 GB</td>
        </tr>
        <tr>
            <td>Windows</td>
            <td>D:</td>
            <td>100 GB</td>
        </tr>
     </tbody>
 </table>

 <script type="text/javascript">
     function func1(x)
     {
    $("tr").removeClass();
    $("tr:gt(0)").click(function() {
        $('#div1').append("<div id='div1'>alien</div>")
    }   
     }
 </script>

Answer 1

我不确定你想对文字做什么，但基本的想法是：

添加到div：

$("#table tbody").on("click", "tr", function() {
        $('#div1').append(this.text());    
});

替换内容：

$("#table tbody").on("click", "tr", function() {
        $('#div1').html(this.text());    
});

Answer 2

<script type="text/javascript">

     $(document).ready(function(){
       $("#table").on("click", "tr", function() {
         $('#div1').html(this.text());    
       });         
     });

或更改为func1

     function func1(x)
     {
        $(this).removeClass();// Not sure why it is needed
        $('#div1').html("Your data");
     }
 </script>

根据单击的行填充div

2 个答案: