Question

我一直在研究这个JS，它允许固定列和标题行都很好，但是工作出来并设置列宽度的JS似乎不起作用，我似乎无法理解为什么在时刻。

任何人都可以用第二双眼睛碾过来吗？列只是非常紧密，没有正确间隔，就像它们应该是哦，另一个是固定的右列由于某种原因不像第一列一样调整高度，也看不出原因。

提前感谢任何有关此问题的帮助：

JS CODE：

fnAdjustTable=function(){

  var colCount=jQuery('#firstTr>td').length; //get total number of column
  var m=0;
  var n=0;
  var brow='mozilla';

  jQuery.each(jQuery.browser, function(i, val) {
    if(val==true){  
      brow=i.toString();
    }
  });

  jQuery('.tableHeader').each(function(i){
    if(m<colCount){    
      if(brow=='mozilla'){
        //for adjusting first td
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').innerWidth());   
        //for assigning width to table Header div
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').innerWidth());
      }
      else if(brow=='msie'){
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());   
        //In IE there is difference of 2 px
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').width()-2);
      }
      else if(brow=='safari'){
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());      
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').width());
      } else {
        jQuery('#firstTd').css("width",jQuery('.tableFirstCol').width());      
        jQuery(this).css('width',jQuery('#table_div td:eq('+m+')').innerWidth());
      }
    }
    m++;
  });

  jQuery('.tableFirstCol').each(function(i){
    if(brow=='mozilla'){
      //for providing height using scrollable table column height
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').outerHeight());      
    } else if(brow=='msie'){    
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').innerHeight()-2);
    } else {
      jQuery(this).css('height',jQuery('#table_div td:eq('+colCount*n+')').height());
    }
    n++;
  });    
}

//function to support scrolling of title and first column
fnScroll=function(){
  jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
  jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
        jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
}

jQuery(document).ready(function(){
  fnAdjustTable();
});

HTML

<table cellspacing="0" cellpadding="0" border="1" >
  <tr>
    <td id="firstTd"></td>
    <td>
     <div id="divHeader" style="overflow:hidden;width:736px;">
      <table cellspacing="0" cellpadding="0" border="1">
       <tr>
        <td><div class="tableHeader">1 Complex Lot</div></td>
        <td><div class="tableHeader">Component 1</div></td>
        <td><div class="tableHeader">Host</div></td>
        <td><div class="tableHeader">Partcipiant</div></td>
        <td><div class="tableHeader">Host Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
        <td><div class="tableHeader">Partcipiant Price</div></td>
                                <td><div class="tableHeader">Partcipiant Price 1</div></td>
        <td><div class="tableHeader">Partcipiant Price 2</div></td>
        <td><div class="tableHeader">Partcipiant Price 3</div></td>
        <td><div class="tableHeader">Partcipiant Price 4</div></td>
       </tr>
      </table>
     </div>
    </td>
    <td><a class="button small green"><i class="icon-plus"></i>Add Lot Component</a></td>
  </tr>
  <tr>
   <td valign="top">
    <div id="firstcol" style="overflow: hidden;height:180px">
     <table width="100" cellspacing="0" cellpadding="0" border="1" >
      <tr>
       <td class="tableFirstCol">Line Item 1</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 2</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 3</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 4</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 5</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 6</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 7</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 8</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 9</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 10</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 11</td>
      </tr>
      <tr>
       <td class="tableFirstCol">Line Item 12</td>
      </tr>
      <tr>
        <td class="tableFirstCol">Line Item 13</td>
      </tr>
     </table>
    </div>
   </td>

    <td valign="top">
      <div id="table_div" style="overflow: scroll;width:736px;height:200px;position:relative" onscroll="fnScroll()" >
        <table width="736" cellspacing="0" cellpadding="0" border="1" class="complex-lots-table">
          <tr id="firstTr">
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter InfoEnter Info  Enter InfoEnter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter InfoEnter Info  Enter InfoEnter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
          <tr>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td>&pound;100 / unit</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
           <td><i class="icon-pencil"></i> Enter Info</td>
          </tr>
        </table>
      </div>
    </td>
    <td>
        <div id="lastcol" style="overflow: hidden;height:180px">
     <table width="100" cellspacing="0" cellpadding="0" border="1" >
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
       <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
      <tr>
        <td class="tableFirstCol"><a class="button small red"><i class="icon-trash"></i>Remove</a></td>
      </tr>
     </table>
    </div>
    </td>
  </tr>
</table>

由于

使用Jquery滚动表，设置标题宽度的问题

0 个答案: