CODEWITHSUNDEEP
javascripthtmldatatables
J. Doe43
J. Doe43

Reputation: 207

HTML Table, retrieving data from row and displaying it elsewhere

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

Upvotes: 0

Views: 228

Answers (3)

Jain Abhishek
Jain Abhishek

Reputation: 27

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

Upvotes: 0

Peter Schweitzer Jr
Peter Schweitzer Jr

Reputation: 267

With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.

You can either use the onclick attribute or addEventListener method of HTML elements. 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). The latter will pass the row element that was clicked and you can extract the pertinent information.

Upvotes: 0

AngelSalazar
AngelSalazar

Reputation: 3113

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>

Upvotes: 1

Related Questions