0
我有兩個html文件，在第一個html中，我添加了一個包含一些數據的表格。當我點擊表格行時，細節應該顯示在另一個html頁面中。我可以做到這一點嗎？有人教我嗎？在另一個html中顯示錶格的行數據
var leaveList=[{
"AppliedOn" :"12-02-2017",
"Reason" \t \t :"Home town visit",
"Description" \t :"xxxxxxxxx",
"LeaveOn" \t \t :"16-02-2017",
"Duration" \t \t :"3 days",
"Status" \t \t :"approved"
},
{
"AppliedOn" :"12-02-2017",
"Reason" \t \t :"Home town visit",
"Description" \t :"xxxxxxxxx",
"LeaveOn" \t \t :"16-02-2017",
"Duration" \t \t :"3 days",
"Status" \t \t :"pending",
}
];
$(document).ready(function(){
\t \t leaveTable()
\t \t
$('#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(){
\t \t for(var i=0;i<leaveList.length;i++){
\t \t \t 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>';
\t \t
\t \t \t $('#levListTable').append(tab)
\t \t }
}
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">
\t \t \t \t <thead class="levListTabHead">
\t \t \t \t <tr>
\t \t \t \t <td>Applied On</td>
\t \t \t \t <td>Reason</td>
\t \t \t \t <td>Description</td>
\t \t \t \t <td>Leave On</td>
\t \t \t \t <td>Duration</td>
\t \t \t \t <td>Status</td>
\t \t \t \t <td>Action</td>
\t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t <tbody id="levListTable">
\t \t \t \t </tbody> \t \t \t
\t \t \t \t </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="Emp0" 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);
}
});
});
這是正確的如何通過所有字段的值？ 試圖添加小提琴但我無法保存，我不知道爲什麼。
這就是我要求的？沒有ajax這是不可能的權利？ – user7397787
@SuperCoolHandsomeGelBoy如果我閱讀hes正確發佈，當他點擊第一頁底部時，它將打開第二頁，並從表 –