为什么赢了'；t我的<；部门>；当我告诉它时，用javascript调整大小？_Javascript_Css_Dhtml

为什么赢了'；t我的<；部门>；当我告诉它时，用javascript调整大小？

javascript css

为什么赢了'；t我的<；部门>；当我告诉它时，用javascript调整大小？,javascript,css,dhtml,Javascript,Css,Dhtml,我有一个元素，其中包含一个表，我想将其调整为最大视口高度-70 px。原因是我希望标题保持在一个位置，表格独立滚动。我不能使用iframe，因为有复杂的javascript与表交互。因此，我必须使用并将其溢出值设置为滚动。我的问题是，当我告诉容器时，它不会调整大小。容器如下所示： <div class="tableContainer" id="tblCont"> <table width="100%" border="0" cellpadding="0" cellspaci

我有一个

元素，其中包含一个表，我想将其调整为最大视口高度-70 px。原因是我希望标题保持在一个位置，表格独立滚动。我不能使用iframe，因为有复杂的javascript与表交互。因此，我必须使用

并将其溢出值设置为滚动。我的问题是，当我告诉容器时，它不会调整大小。容器如下所示：

<div class="tableContainer" id="tblCont">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
    <tr class="row_a" id="1">
      <td>id: 1</td>
    </tr>
  </table>
</div>

最后，这里是用来设置表容器高度的javascript：

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = h;
</script>


var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
tbc.style.height=h；

我甚至试着用它设定一个固定的高度

tbc.style.height=“50px”
但这也不起作用
有什么想法吗？
我认为javascript不会被过度使用。我把它包装在一个init函数中，它就可以工作了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            .tableContainer
            {
                overflow: scroll;
                /*height: 400px;  -- this was just to see if the concept works - and this seems to work fine */
            }
        </style>
        <script type="text/javascript">
            function init()
            {
                var tbc = document.getElementById("tblCont");
                var h = Math.round((window.innerHeight)-(70))+"px";

                document.getElementById('test').onclick = function()
                {
                    tbc.style.width = "40px";
                }
            }

            window.onload = init;
        </script>
    </head>

    <body>
        <form>
            <input id="test" type="button" value="test" />
        </form>

        <div class="tableContainer" id="tblCont">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
            <tr class="row_a" id="1">
              <td>id: 1</td>
            </tr>
          </table>
        </div>
    </body>
</html>


试验
.餐具柜
{
溢出：滚动；
/*高度：400px；——这只是为了看看这个概念是否有效——这似乎很有效*/
}
函数init（）
{
var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
document.getElementById（'test'）。onclick=function（）
{
tbc.style.width=“40px”；
}
}
window.onload=init；
身份证号码：1
我认为javascript不会被过度使用。我把它包装在一个init函数中，它就可以工作了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            .tableContainer
            {
                overflow: scroll;
                /*height: 400px;  -- this was just to see if the concept works - and this seems to work fine */
            }
        </style>
        <script type="text/javascript">
            function init()
            {
                var tbc = document.getElementById("tblCont");
                var h = Math.round((window.innerHeight)-(70))+"px";

                document.getElementById('test').onclick = function()
                {
                    tbc.style.width = "40px";
                }
            }

            window.onload = init;
        </script>
    </head>

    <body>
        <form>
            <input id="test" type="button" value="test" />
        </form>

        <div class="tableContainer" id="tblCont">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
            <tr class="row_a" id="1">
              <td>id: 1</td>
            </tr>
          </table>
        </div>
    </body>
</html>


试验
.餐具柜
{
溢出：滚动；
/*高度：400px；——这只是为了看看这个概念是否有效——这似乎很有效*/
}
函数init（）
{
var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
document.getElementById（'test'）。onclick=function（）
{
tbc.style.width=“40px”；
}
}
window.onload=init；
身份证号码：1
在DOM元素存在之前，正在调用脚本。您需要使用onload事件处理程序调用脚本，并将脚本放入函数：
<script type="text/javascript">
    function setHeight() {
        var tbc = document.getElementById("tblCont");
        var h = Math.round((window.innerHeight)-(70))+"px";
        tbc.style.height = h;
    }
</script>

<body onload="setHeight()">
....


函数setHeight（）{
var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
tbc.style.height=h；
}
....
在DOM元素存在之前，正在调用脚本。您需要使用onload事件处理程序调用脚本，并将脚本放入函数：
<script type="text/javascript">
    function setHeight() {
        var tbc = document.getElementById("tblCont");
        var h = Math.round((window.innerHeight)-(70))+"px";
        tbc.style.height = h;
    }
</script>

<body onload="setHeight()">
....


函数setHeight（）{
var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
tbc.style.height=h；
}
....
尝试两件事：
首先，如果还没有，请注释掉var h行，然后手动设置高度：
<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    //var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = "50px";
</script>


var tbc=document.getElementById（“tblCont”）；
//var h=数学圆（（window.innerHeight）-（70））+“px”；
tbc.style.height=“50px”；

其次，尝试发出h变量警报，而不是设置高度：
<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    alert(h);
    //tbc.style.height = "50px";
</script>


var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
警报（h）；
//tbc.style.height=“50px”；

我的猜测是，问题在于h是如何被设置的，这会杀死它之后的任何东西。
尝试两件事：
首先，如果还没有，请注释掉var h行，然后手动设置高度：
<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    //var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = "50px";
</script>


var tbc=document.getElementById（“tblCont”）；
//var h=数学圆（（window.innerHeight）-（70））+“px”；
tbc.style.height=“50px”；

其次，尝试发出h变量警报，而不是设置高度：
<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    alert(h);
    //tbc.style.height = "50px";
</script>


var tbc=document.getElementById（“tblCont”）；
var h=数学圆（（window.innerHeight）-（70））+“px”；
警报（h）；
//tbc.style.height=“50px”；

我的猜测是，问题在于h是如何被设置的，然后它会杀死它之后的任何东西。
我强烈建议您考虑第三方网格解决方案，例如来自的。

根据经验，我可以说，在DHTML中从头开始构建一个功能强大的数据网格是非常困难的，而使其跨浏览器兼容并不有趣。我强烈建议您考虑第三方网格解决方案，例如从
根据经验，我可以说，在DHTML中从头开始构建一个功能强大的数据网格是非常困难的，使其跨浏览器兼容并不有趣。
不，它会执行，但如果通过firebug之类的调试器跟踪它，你会发现它在div存在之前被调用，因此会出现“tbc为null”异常。不，它会执行，但如果您通过firebug之类的调试器跟踪它，您将看到它在div存在之前被调用，因此失败并出现“tbc is null”异常。