Display Table Cell Values to Input Text Fields

Let's say table rows are populated with information and you want the "input text" to be filled with those info. Here's how:

Sample HTML code for table:
<table id="viewOwnersInfo" class="table table-hover" border="1">
            <th>Last Name</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Contact No.</th>
            <td>P3A Ampayon, Butuan City</td>
            <td>Edsel Matt</td>
            <td>Km. 3 Baan 3</td>
            <td>Ampayon Butuan City</td>
<div class="form-group">
    <div class="col-md-12">
        <label for="owner">Owner</label>
        <input class="form-control" type="text" name="owner" id="owner" placeholder="Owner" data-toggle="modal" data-target="#owner_modal" />
<!--Owner Address-->
<div class="form-group">
    <div class="col-md-6">
        <label for="owneraddress">Address</label>
        <input class="form-control" type="text" name="owneraddress" id="owneraddress" placeholder="Owner Address" />
<!--Owner Contact Number-->
<div class="form-group">
    <div class="col-md-6">
        <label for="ownercontact">Contact Number</label>
        <input class="form-control" type="text" name="ownercontact" id="ownercontact" placeholder="Contact Number" />
<div class="form-group">
    <div class="col-md-6">
        <label for="tdno">TIN</label>
        <input class="form-control" type="text" name="tdno" id="tdno" placeholder="TIN" />

Just for highlighting the table row if selected (CSS):


Jquery script, change the id's as necessary:

$('#viewOwnersInfo tr').click(function () {
    $("#viewOwnersInfo tr").removeClass("selected");
    if (!this.rowIndex) return; // skip first row
    $(this).each(function () {
        if (!this.rowIndex) return; // skip first row
        var a1 = this.cells[0].innerHTML;
        var a2 = this.cells[1].innerHTML;
        var a3 = this.cells[2].innerHTML;
        var a4 = this.cells[3].innerHTML;
        var a5 = this.cells[4].innerHTML;
        var a6 = this.cells[5].innerHTML;
        $("#owner").val(a2 + " " + a3 + " " + a1);

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls