Display table row data in another html

Question

I have two html files,In first html I added one table with some data.When I click the table row that details should be displayed in another html page.How can I achieve this?Can anyone teach me?

 var leaveList=[{ "AppliedOn" :"12-02-2017", "Reason" :"Home town visit", "Description" :"xxxxxxxxx", "LeaveOn" :"16-02-2017", "Duration" :"3 days", "Status" :"approved" }, { "AppliedOn" :"12-02-2017", "Reason" :"Home town visit", "Description" :"xxxxxxxxx", "LeaveOn" :"16-02-2017", "Duration" :"3 days", "Status" :"pending", } ]; $(document).ready(function(){ leaveTable() $('#levListTable').find('tr').click( function(){ var row = $(this).closest('tr').attr('id'); alert('You clicked row '+ row); viewDetails(row) window.location.href="file:///D:/4SIGHT/jan2017/intranet/Leave-management/leaveDetails.html"; }); }); function leaveTable(){ for(var i=0;i<leaveList.length;i++){ var tab='<tr id="' + i + '"><td class="appliedOn">'+leaveList[i].AppliedOn+'</td><td class="reason">'+leaveList[i].Reason+ '</td><td class="description">'+leaveList[i].Description+'</td><td class="leaveOn">'+leaveList[i].LeaveOn+ '</td><td class="duration">'+leaveList[i].Duration+'</td><td class="status">'+leaveList[i].Status+ '</td><td><button class="btn editLev btn-info" id="edit'+i+'"><i class="fa fa-pencil"></i></button><button class="btn updateLev btn-success" id="update'+i+'"><i class="fa fa-floppy-o"></i></button><button class="btn dltLev btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i></button></td><tr>'; $('#levListTable').append(tab) } } function viewDetails(row){ var leaveDetails={} var id = row var leaveDetails = { AppliedOn : $('#'+id+" "+".appliedOn").text(), Reason : $('#'+id+" "+".reason").text(), Description :$('#'+id+" "+".description").text(), LeaveOn : $('#'+id+" "+".leaveOn").text(), Duration : $('#'+id+" "+".duration").text(), Status : $('#'+id+" "+".status").text() } console.log(leaveDetails) } 

 <table class="table table-hover table-bordered"> <thead class="levListTabHead"> <tr> <td>Applied On</td> <td>Reason</td> <td>Description</td> <td>Leave On</td> <td>Duration</td> <td>Status</td> <td>Action</td> </tr> </thead> <tbody id="levListTable"> </tbody> </table> 

This is my another Html:

<div class="col-lg-12 col-md-12 col-xs-12 levDetails padding">
        <div class="col-lg-3 col-md-3 col-xs-4 padding bgColor">    
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Employee Id</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Leave Applied On</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Date From</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Date To</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Reason</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Status</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
            <div>
                <label class="col-lg-10 col-md-10 col-xs-10">Description</label><label class="col-lg-2 col-md-2 col-xs-2">:</label>
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-xs-8">
            <div>
                <input type="text" name="" readonly="readonly" value="Emp0012345" id="EmpId">
            </div>  
            <div>
                <input type="text" name=""  readonly="readonly" value="12-02-2017" id="levAppliedDate">
            </div>  
            <div>
                <input type="text" name="" readonly="readonly" value="15-02-2017" id="fromDate">
            </div>  
            <div>
                <input type="text" name="" readonly="readonly" value="17-02-2017" id="toDate">
            </div>
            <div>
                <input type="text" name="" readonly="readonly" value="Home Town Visit" id="reasonForLev">
            </div>          
            <div>
                <input type="text" name="" readonly="readonly" value="pending" id="currentStatus">
            </div>      
            <div>
                <textarea name="" readonly="readonly" rows="2" cols="50" id="levDescrip">I have planned to visity my home town by this week.So I need leave two days.</textarea>
            </div>  
        </div>  
    </div>

Tried this following ajax:

$.ajax({
type: 'POST',
url: '',
data: { AppliedOn: $('.appliedOn').val() },
success: function(data)
{
$('#levAppliedDate').html(data);
}

});
});

Is this correct ?How to pass all fields values? Tried to add fiddle But I am unable to save that I don't know why.

Answer 1

I would send query parameter ?id=something and then call AJAX in the second page to get details for that id. There is also another way... store data retrieved in the first page in cookie and then read the cookie in the second page.

Answer 2

Here is an example:

 $('#levListTable tr').click(function() { $(this).find('td').each(function(key, td) { var type = $(td).data('type'); $('input[name=' + type + ']').val($(this).html()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover table-bordered"> <thead class="levListTabHead"> <tr> <td>Applied On</td> <td>Reason</td> </tr> </thead> <tbody id="levListTable"> <tr> <td data-type="applied">Tuesday</td> <td data-type="reason">Unemployed</td> </tr> <tr> <td data-type="applied">Wednesday</td> <td data-type="reason">Whatever</td> </tr> </tbody> </table> <input name="applied" type="text" value=""> <input name="reason" type="text" value=""> 

EDIT:

You can't make ajax request between html documents or scripts, you need server side logic to handle the request and send a response.

What you can do is something like this.

• select the content of the second 'page' insert the data in it like i showed you and then replace the body content with it.