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请求，您需要服务器端逻辑来处理请求并发送响应。

你能做的就是这样。

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

在另一个html中显示表行数据

2 个答案: