请高手帮我解决这个js问题

将style像素转换成白分比
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<style type="text/css">
body { 
    font-family: "arial", "helvetica", "sans-serif", ""; 
font-size: 9pt; 
    margin: 0px;
scrollbar-face-color:#efefe7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#a5a5a5;
    scrollbar-darkshadow-color:#a5a5a5;
    scrollbar-shadow-color:#d6d6ce;
    scrollbar-arrow-color:#003184;
    scrollbar-track-color:#deded6;
}
table { 
  font-family: "arial", "helvetica", "sans-serif",""; 
font-size: 9pt; 
line-height: 150%; 
color: #000000;
         }
.display-tb2
{
border-right: #808080 1px solid; 
border-top: #808080 1px solid; 
border-left: #808080 1px solid; 
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "th") 
{

if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^\s\t\n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:400px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th 
{
border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd 
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 0px solid; 
border-left: #a4a6a4 0px solid; 
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even 
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 0px solid; 
border-left: #a4a6a4 0px solid; 
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
}
</style><body bgcolor="F6F6F6" style="padding:10 10 10 10"><div class="tableContainer" id="order_Container">
<!--动态表格-->
<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
<tr>
<td>
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<thead>

<th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
<th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
<th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
<th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
<th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
<th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
<th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
<th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
<th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
</thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr class="odd">
<td colspan="9">
<div id="order_GridBody" class="bodyContainer">
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">
<tr class="even">
<td class="select-cell">
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>
<td class="select-cell"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>

解决方案 »

  1.   

    还是自己来回复.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <SCRIPT type="text/javascript">
    <!--  
     function initialize(){
    var order_Container = document.getElementById("order_Container");
    var containerWidth = order_Container.clientWidth;
    var divLen =  parseInt( containerWidth * 0.07 );
    document.getElementById("divHead0").style.setExpression("width",divLen);
    document.getElementById("divBody0").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.2 );
    document.getElementById("divHead1").style.setExpression("width",divLen);
    document.getElementById("divBody1").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.32 );
    document.getElementById("divHead2").style.setExpression("width",divLen);
    document.getElementById("divBody2").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.2 );
    document.getElementById("divHead3").style.setExpression("width",divLen);
    document.getElementById("divBody3").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.25 );
    document.getElementById("divHead4").style.setExpression("width",divLen);
    document.getElementById("divBody4").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.2 );
    document.getElementById("divHead5").style.setExpression("width",divLen);
    document.getElementById("divBody5").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.32 );
    document.getElementById("divHead6").style.setExpression("width",divLen);
    document.getElementById("divBody6").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.2 );
    document.getElementById("divHead7").style.setExpression("width",divLen);
    document.getElementById("divBody7").style.setExpression("width",divLen);
    divLen = parseInt( containerWidth * 0.25 );
    document.getElementById("divHead8").style.setExpression("width",divLen);
    document.getElementById("divBody8").style.setExpression("width",divLen);
    }
    //-->
    </SCRIPT>
    </head>
      

  2.   

    <style type="text/css">
    body { 
        font-family: "arial", "helvetica", "sans-serif", ""; 
    font-size: 9pt; 
        margin: 0px;
    scrollbar-face-color:#efefe7;
        scrollbar-highlight-color:#ffffff;
        scrollbar-3dlight-color:#a5a5a5;
        scrollbar-darkshadow-color:#a5a5a5;
        scrollbar-shadow-color:#d6d6ce;
        scrollbar-arrow-color:#003184;
        scrollbar-track-color:#deded6;
    }
    table { 
        font-family: "arial", "helvetica", "sans-serif",""; 
    font-size: 9pt; 
    line-height: 150%; 
    color: #000000;
             }
    .display-tb2
    {
    border-right: #808080 1px solid; 
    border-top: #808080 1px solid; 
    border-left: #808080 1px solid; 
    border-bottom: #808080 1px solid;
    border:0;
    cellpadding:2;
    cellspacing:0;
    margin-top:2px;
    border-collapse:collapse;
    }
    div.tableContainer
    {
    border: 1px solid #003366;
    overflow-x:auto;
    width:95%;
    dyn-behavior:expression(
    onscroll == null?
    (onscroll = function(){
    if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
    var oGridBody = document.getElementById("order_GridBody");
    oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
    event.srcElement.oldScroll == event.srcElement.scrollLeft;
    }):true,
    onmousedown == null?
    (onmousedown = function(){
    if(self.currentTH != null) return;
    var obj = document.elementFromPoint(event.x,event.y);
    var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "th") 
    {

    if(objL.tagName.toLowerCase() == "th")
    {
    obj = objL;
    }
    if(obj.className == "fixed") return;
    self.currentX = event.x;
    self.currentTH = obj.childNodes[0];
    self.currentTH.setCapture();
    }
    }):true,
    onmouseup == null?
    (onmouseup = function(){
    if(self.currentTH != null)
    {
    self.currentTH.releaseCapture();
    self.currentTH = null;
    }
    }):true,
    onmousemove == null?
    (onmousemove = function(){
    if(self.currentTH != null)
    {
    var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
    if(width < 0) width = 0;
    var dt = parseInt(self.currentTH.style.width) - width;
    self.currentTH.style.width = width;
    __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
    self.currentX = event.x;
    }
    }):true,
    self.__resizeCell == null?
    (self.__resizeCell = function(idx, width){
    var cells = document.getElementById("order_GridBody_Cells");
    var rows = cells.childNodes;
    var i = 0;
    for (var i = 0; i < rows.length; i++)
    {
    var cell = rows[i].childNodes[idx].childNodes[0];
    var resetPattern = /style=[^\s\t\n]+/;
    cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
    }
    }):true
    )
    }
    div.tableContainer2
    {
    overflow-x:auto;
    width:95%;
    dyn-behavior:expression(
    onscroll == null?
    (onscroll = function(){
    if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
    var oGridBody = document.getElementById("order_GridBody");
    oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
    event.srcElement.oldScroll == event.srcElement.scrollLeft;
    }):true,
    onmousedown == null?
    (onmousedown = function(){
    if(self.currentTH != null) return;
    var obj = document.elementFromPoint(event.x,event.y);
    var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "th") 
    {

    if(objL.tagName.toLowerCase() == "th")
    {
    obj = objL;
    }
    if(obj.className == "fixed") return;
    self.currentX = event.x;
    self.currentTH = obj.childNodes[0];
    self.currentTH.setCapture();
    }
    }):true,
    onmouseup == null?
    (onmouseup = function(){
    if(self.currentTH != null)
    {
    self.currentTH.releaseCapture();
    self.currentTH = null;
    }
    }):true,
    onmousemove == null?
    (onmousemove = function(){
    if(self.currentTH != null)
    {
    var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
    if(width < 0) width = 0;
    var dt = parseInt(self.currentTH.style.width) - width;
    self.currentTH.style.width = width;
    __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
    self.currentX = event.x;
    }
    }):true,
    self.__resizeCell == null?
    (self.__resizeCell = function(idx, width){
    var cells = document.getElementById("order_GridBody_Cells");
    var rows = cells.childNodes;
    var i = 0;
    for (var i = 0; i < rows.length; i++)
    {
    var cell = rows[i].childNodes[idx].childNodes[0];
    var resetPattern = /style=[^\s\t\n]+/;
    cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
    }
    }):true
    )
    }
    div.bodyContainer
    {
    height:340px;
    width:95%;
    overflow-x:hidden;
    overflow-y:auto;
    }
    div.gridCell_standard
    {
    overflow:hidden;
    nw:expression(this.noWrap=false);
    margin-left: 0px;
    margin-right: 1px;
    padding-left: 2px;
    cursor:default;
    }
    div.gridCell_standard1
    {
    overflow:hidden;
    nw:expression(this.noWrap=true);
    margin-left: 0px;
    margin-right: 1px;
    padding-left: 2px;
    cursor:default;
    }
    div.gridCell_narrow
    {
    overflow:hidden;
    margin-left: 0px;
    margin-right: 1px;
    padding-left: 2px;
    nw:expression(this.noWrap=true);
    cursor:default;
    }
    th 
    {
    border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 1px solid; 
    border-left: #a4a6a4 1px solid; 
    border-bottom: #a4a6a4 1px solid;
    background-image: url(images/default/headerbg.gif);
                    color:#ffffff;
    font-style:normal;
    font-weight:normal;
    height:20px;
    cursor:col-resize;
    dyn-behavior:expression(
    ondblclick == null?
    (ondblclick = function()
    {
    var src = event.srcElement;
    if(event.srcElement.tagName.toLowerCase()!="div")
    {
    src = src.childNodes[0];
    }
    src.style.width = "";
    __resizeCell(src.columnIndex,src.clientWidth);
    }):true
    )
    }
    th.fixed
    {
    border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 1px solid; 
    border-left: #a4a6a4 1px solid; 
    border-bottom: #a4a6a4 1px solid;
    background-image: url(images/default/headerbg.gif);
                    color:#ffffff;
    font-style:normal;
    font-weight:normal;
    height:20px;
    cursor:default;
    }
    tr.odd 
    {
      border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 0px solid; 
    border-left: #a4a6a4 0px solid; 
    border-bottom: #a4a6a4 1px solid;
    noWrap;
    }
    tr.even 
    {
      border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 0px solid; 
    border-left: #a4a6a4 0px solid; 
    border-bottom: #a4a6a4 1px solid;
    }
    td.odd_even
    {
      border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 1px solid; 
    border-left: #a4a6a4 1px solid; 
    border-bottom: #a4a6a4 1px solid;
    noWrap;
    }
    td.select-cell
    {
      border-right: #a4a6a4 1px solid; 
    border-top: #a4a6a4 1px solid; 
    border-left: #a4a6a4 1px solid; 
    border-bottom: #a4a6a4 1px solid;
    }
    </style>
      

  3.   

    <body onload="initialize()" bgcolor="F6F6F6" style="padding:10 10 10 10"><center><div class="tableContainer" id="order_Container">
    <!--动态表格-->
    <table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
    <tr>
    <td>
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
    <thead>

    <th class="fixed"><div id="divHead0" name="DivHead0" id="divHead" columnIndex="0" class="gridCell_narrow">选择</div></th>
    <th><div id="divHead1" name="DivHead1" columnIndex="1" class="gridCell_standard">订单编号</div></th>
    <th><div id="divHead2" name="DivHead2" columnIndex="2" class="gridCell_standard">订货日期</div></th>
    <th><div id="divHead3" name="DivHead3" columnIndex="3" class="gridCell_standard">订货单位</div></th>
    <th><div id="divHead4" name="DivHead4" columnIndex="4" class="gridCell_standard">订单类别</div></th>
    <th><div id="divHead5" name="DivHead5" columnIndex="5" class="gridCell_standard">产品类别</div></th>
    <th><div id="divHead6" name="DivHead6" columnIndex="6" class="gridCell_standard">版本号</div></th>
    <th><div id="divHead7" name="DivHead7" columnIndex="7" class="gridCell_standard">订货金额</div></th>
    <th><div id="divHead8" name="DivHead8" columnIndex="8" class="gridCell_standard">订单状态</div></th>
    </thead>
    </table>
    </td>
    </tr>
    <!--<tfoot> 共3页 </tfoot>-->
    <tbody>
    <tr class="odd">
    <td colspan="9">
    <div id="order_GridBody" class="bodyContainer">
        <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
    <tbody id="order_GridBody_Cells">
    <tr class="even">
    <td class="select-cell">
             <div id="divBody0" name="DivBody0" id="divBody" class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>
    <td class="select-cell"><div id="divBody1" name="DivBody1" class="gridCell_standard">DJPH001</div></td>
    <td class="odd_even"><div id="divBody2" name="DivBody2" class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div id="divBody3" name="DivBody3" class="gridCell_standard">19</div></td>
    <td class="odd_even"><div id="divBody4" name="DivBody4" class="gridCell_standard">直abc销直abc销直abc销</div></td>
    <td class="odd_even"><div id="divBody5" name="DivBody5" class="gridCell_standard">KIS</div></td>
    <td class="odd_even"><div id="divBody6" name="DivBody6" class="gridCell_standard">5</div></td>
    <td class="odd_even"><div id="divBody7" name="DivBody7" class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div id="divBody8" name="DivBody8" class="gridCell_standard">已取消</div></td>
    </tr>
    </tbody>
    </table>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div style="height:15px"></div>
    </div>
    <center>
    </body>
    </html>