我想在点击按钮时冻结动态生成的表的第一行和第一列，它第一次工作正常，但是当我点击同一个按钮时，所有生成的数据都插入到表格的第一列是冻结的。 所以如何解决这个问题，并获得与第一次点击输出相同格式的数据。
代码：
<div id="table_box" style="display: none; position: relative; width: 100%; height: 100%;
overflow-x: scroll; border: 1px solid black; padding: 3px ">
<table id="cTable" cellspacing="1" cellpadding="0">
<tr id="table_data"></tr>
</table>
</div>
<style>
.cTContainer { overflow: hidden; }
.cTContainer table { table-layout: fixed; border-width: 0px; border: 0px solid #ebf4fb; border-color: #b7ddf2;}
.relativeContainer { position: relative; overflow: hidden; }
.fixedTB { position: absolute; z-index: 11; font-weight: bold; }
.fixedTB table tr td {overflow: hidden; background-color: #ebf4fb; }
.leftContainer { position: absolute; overflow: hidden; }
.rightContainer { position: absolute; overflow: hidden; }
.leftSBWrapper { position: relative; z-index: 10; }
.topSBWrapper { position: relative; z-index: 10; width: 100%; }
.topSBWrapper table tr td {overflow: hidden; background-color: #ebf4fb; font-weight: bold; }
.SBWrapper { width: 100%; overflow: auto; }
.cTContainer td { overflow: hidden; padding: 2px 2px; border-width: 1px; border: 1px solid #ebf4fb; border-color: #b7ddf2; }
.leftContainer table tr { overflow: hidden; background-color: #ebf4fb; }
body { height: 600px; }
</style>
<script>
$('#view_data').submit(function() {
var product = $('#product').val();
var from = $('#from').val();
var to = $('#to').val();
var that = $(this),
url = url,
type = 'post',
data = {
product: product,
from: from,
to: to
};
$("#LoadingImage").show();
$('#table_box').hide();
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
$('.toClear').remove();
$('#table_data').empty();
$('#table_data').append('<td width="10%" style="white-space: nowrap; text-align: center;">Reading time</td>');
for (var key in response.product_name)
{
$('#table_data').append('<td style="white-space: nowrap; text-align: center;">'+response.product_name[key][0].product_name+'</td>');
$('.rightContainer').append('<td width="10%" style="white-space: nowrap; ">'+response.product_name[key][0].product_name+'</td>');
}
// Reverse the contents of the response, since javascripts inserts data from bottom...
response.csv_final[0][0].reverse();
for (var key in response.csv_final[0][0])
{
var obj = response.csv_final[0][0][key];
$('#table_data').after('<tr class="row_'+key+' toClear">');
for (var key1 in obj)
{
data_out = obj[key1];
console.log(data_out);
if(data_out == null)
{
$('.row_'+key+'').append('<td style="white-space: nowrap; text-align: center;">'+'-');
}else
{
$('.row_'+key+'').append('<td style="white-space: nowrap; text-align: center;">'+data_out);
}
}
$('#table_data').append('</tr>');
}
$('#table_box').show();
$("#LoadingImage").hide();
//code for freezing first row and column of the table
$(function () {
$.fn.cTable = function(o) {
this.wrap('<div class="cTContainer" />');
this.wrap('<div class="relativeContainer" />');
var origTableTmpl = '<table id="freeze" border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>';
var row1 = this.find('tr').slice(0, o.fRows).clone();
var r1c1ColSpan = 0;
for (var i = 0; i < o.fCols; i++ ) {
r1c1ColSpan += this[0].rows[0].cells[i].colSpan;
}
//create table with just r1c1 which is fixed for both scrolls
var tr1c1 = $(origTableTmpl);
row1.each(function () {
var tdct = 0;
$(this).find('td').filter( function () {
tdct += this.colSpan;
return tdct > r1c1ColSpan;
}).remove();
});
row1.appendTo(tr1c1);
tr1c1.wrap('<div class="fixedTB" />');
tr1c1.parent().prependTo(this.closest('.relativeContainer'));
//create a table with just c1
var c1= this.clone().prop({'id': ''});
alert('hello1');
c1.find('tr').slice(0, o.fRows).remove();
c1.find('tr').each(function (idx) {
var c = 0;
$(this).find('td').filter(function () {
c += this.colSpan;
return c > r1c1ColSpan;
}).remove();
});
var prependRow = row1.first().clone();
prependRow.find('td').remove();
// prependRow.find('td').empty();
c1.prepend(prependRow).wrap('<div class="leftSBWrapper" />')
c1.parent().wrap('<div class="leftContainer" />');
c1.closest('.leftContainer').insertAfter('.fixedTB');
//create table with just row 1 without col 1
var r1 = $(origTableTmpl);
row1 = this.find('tr').slice(0, o.fRows).clone();
row1.each(function () {
var tds = $(this).find('td'), tdct = 0;
tds.filter (function () {
tdct += this.colSpan;
return tdct <= r1c1ColSpan;
}).remove();
});
row1.appendTo(r1);
r1.wrap('<div class="topSBWrapper" />')
r1.parent().wrap('<div class="rightContainer" />')
r1.closest('.rightContainer').appendTo('.relativeContainer');
$('.relativeContainer').css({'width': 'auto', 'height': o.height});
this.wrap('<div class="SBWrapper"> ')
this.parent().appendTo('.rightContainer');
this.prop({'width': o.width});
var tw = 0;
//set width and height of rendered tables
for (var i = 0; i < o.fCols; i++) {
tw += $(this[0].rows[0].cells[i]).outerWidth(true);
}
tr1c1.width(tw);
c1.width(tw);
$('.rightContainer').css('left', tr1c1.outerWidth(true));
for (var i = 0; i < o.fRows; i++) {
var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt;
$(tr1c1[0].rows[i]).height(finHt);
$(r1[0].rows[i]).height(finHt);
}
$('.leftContainer').css({'top': tr1c1.outerHeight(true), 'width': tr1c1.outerWidth(true)});
var rtw = $('.relativeContainer').width() - tw;
$('.rightContainer').css({'width' : rtw, 'height': o.height, 'max-width': o.width - tw});
var trs = this.find('tr');
trs.slice(1, o.fRows).remove();
trs.slice(0, 1).find('td').remove();
trs.each(function () {
var c = 0;
$(this).find('td').filter(function () {
c += this.colSpan;
return c <= r1c1ColSpan;
}).remove();
});
r1.width(this.outerWidth(true));
for (var i = 1; i < c1[0].rows.length; i++) {
var c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (c1Ht > thisHt)?c1Ht:thisHt;
$(c1[0].rows[i]).height(finHt);
$(this[0].rows[i]).height(finHt);
}
$('.SBWrapper').css({'height': $('.relativeContainer').height() - $('.topSBWrapper').height()});
$('.SBWrapper').scroll(function () {
var rc = $(this).closest('.relativeContainer');
var lfW = rc.find('.leftSBWrapper');
var tpW = rc.find('.topSBWrapper');
lfW.css('top', ($(this).scrollTop()*-1));
tpW.css('left', ($(this).scrollLeft()*-1));
});
$(window).resize(function () {
$('.rightContainer').width(function () {
return $(this).closest('.relativeContainer').outerWidth() - $(this).siblings('.leftContainer').outerWidth();
});
});
}
$('#cTable').cTable({
width: 1300,
height: 500,
fCols: 1,
fRows: 1
});
});
}
});
return false;
});
});
</script>