在另一个HTML中显示表格行数据

Question

我有两个html文件，在第一个html文件中，我添加了一个包含一些数据的表。当我单击表行时，应在另一个html页中显示详细信息。如何实现此目的？有人可以教我吗？

 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> 

这是我的另一个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>

在以下ajax上进行了尝试：

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

});
});

这是正确的吗？如何传递所有字段的值？ 试图添加小提琴，但我无法保存，我不知道为什么。

Answer 1

我将发送查询参数？id = something，然后在第二页中调用AJAX以获取该ID的详细信息。 还有另一种方法...将在第一页中检索到的数据存储在cookie中，然后在第二页中读取cookie。

Answer 2

这是一个例子：

 $('#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=""> 

编辑：

您不能在html文档或脚本之间发出ajax请求，需要服务器端逻辑来处理该请求并发送响应。

您可以做的就是这样。

• 选择第二个“页面”的内容，像我向您展示的那样在其中插入数据，然后用它替换正文内容。