这个js的td属性是如何设定的

我在这里面写的td width对于新加的行完全无用  
<tbody id="ACE_HIDDEN_TABLE" style="display:one">  这个display  可以设定为默认有一行或默认无行
默认显示一行的时候,然后增加一行  
默认不显示行的时候，增加一行     我希望能够与上面的文字栏对齐 应该如何处理？
html代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
<!--
table{border-collapse:collapse;border:none;} /*table改为细边框*/
td{border:solid #000 1px;}
-->
<!--
table input {
    border-top-width: 0px;   /*不用时使用这个方法注释掉*/
    border-right-width: 0px;  /*input去边框的方法*/
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000; 
}
-->
</style>
<script language="JavaScript"> 
var cGetRow=-99999;
function insertrow(){
var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
}
function GetRow(){
//获得行索引
//两个parentElement分别是TD和TR，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;DelRow(cGetRow);//点击checkbox时，直接删除行。
}
function DelRow(iIndex){
//删除一行
if(iIndex==-99999){
alert("系统提示：没有选中行号!");
}else{
newTB.deleteRow(iIndex);
iIndex==-99999;//将rowIndex恢复默认值。
}
}
</script>
</head><body><form action="chuli.php" method="post">
<table>
<tr><td>名字</td></tr>
<tr><td><input type="text" name="name" /></td></tr>
</table><table border="1">
<tr>
    <td width="40">删除</td>
    <td width="40">登记</td>
    <td width="70">用户号码</td>
    <td width="150">建筑名称</td>
</tr>     <tbody id="ACE_HIDDEN_TABLE" style="display:one">
  <tr>
    <td width="40"><input type="checkbox" onclick="GetRow()"/></td>
    <td width="40"><input type="text" name="record[]" /></td>
    <td width="70"><input type="text" name="usercode[]" /></td>
    <td width="150"><input type="text" name="buildname[]" /></td>
  </tr>
</table><table width="1250" border="1">
<!-- 插入新行的区域 begin -->
<tbody id="newTB">
</tbody>
<!-- 插入新行的区域 end -->
</table><div align="center" style="margin:10px;">
<input type="button" onClick="insertrow();" value="增加一行">
<!--<input type="button" onClick="DelRow(cGetRow);" value="删除一行">-->
</div>
<input type="submit" value="保存页面" style="width:120px;height:40px;" name="save" />
</form>
</body>
</html>

解决方案 »

  1.   

    一个表格可以有多个tbody元素，表格代码改成这样：  <table>
        <tr>
          <td>名字</td>
        </tr>
        <tr>
          <td><input type="text" name="name" /></td>
        </tr>
      </table>
      <table border="1">
        <thead>
          <tr>
            <th width="40">删除</th>
            <th width="40">登记</th>
            <th width="70">用户号码</th>
            <th width="150">建筑名称</th>
          </tr>
        </thead>
        <tbody id="ACE_HIDDEN_TABLE" style="display:one">
          <tr>
            <td width="40"><input type="checkbox" onclick="GetRow()"/></td>
            <td width="40"><input type="text" name="record[]" /></td>
            <td width="70"><input type="text" name="usercode[]" /></td>
            <td width="150"><input type="text" name="buildname[]" /></td>
          </tr>
        </tbody>
        <tbody id="newTB">
        </tbody>
      </table>
      

  2.   

    <table width="1250" border="1">
    <!-- 插入新行的区域 begin -->
    <tbody id="newTB">
    </tbody>
    <!-- 插入新行的区域 end -->
    </table>去掉这里的width
      

  3.   

    用<col style=" width:5%; "/>代表第一列
    <col style=" width:5%; "/>代表第二列
    <col style=" width:5%; "/>代表第三列
    以此类推。可随意控制样式
      

  4.   

    <col style=" width:5%; "/>写该在<table>下面即可
      

  5.   


    function insertrow(){
    var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
    document.all.ACE_HIDDEN_TABLE.appendChild(newrow); 
    //这里这行请注释掉document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
    }
    //这里几行写着完全脱裤子放屁，多此一举
    <table width="1250" border="1">
    <!-- 插入新行的区域 begin -->
    <tbody id="newTB">
    </tbody>
    <!-- 插入新行的区域 end -->
    </table>
    这几行完全可以去掉，直接加在原来table里面不是更好。
      

  6.   

    宽度由整个表格的第一行控制，即thead->tr中各单元格width属性值或style width样式值决定。
      

  7.   


    那按理说 应该是按
    <tr>
        <td width="40">删除</td>
        <td width="40">登记</td>
        <td width="70">用户号码</td>
        <td width="150">建筑名称</td>
    </tr>  这个的设定控制我现在将display设置为none  
    打开这个页面  可以看到 是我第一行处理的宽度
    点击增加一行，这时整个表格的宽度就被拉宽
    在IE6/chrome中测试都是这样还有就是按此方法改进后,原JS是点击checkbox即可删除此列，
    但是改完后就不行了再次麻烦帮着测试下 谢谢
      

  8.   


    哦是我弄错了。单元格内容超过设置的宽度值时会撑开单元格的，文本框元素有个默认的宽度（默认的宽度值在各浏览器下还各有差异。可以给input元素设置一个合适的宽度值，比如：
        <tbody id="ACE_HIDDEN_TABLE" style="display:none">
          <tr>
            <td><input type="checkbox" onclick="GetRow()"/></td>
            <td><input type="text" name="record[]" style="width:40px;" /></td>
            <td><input type="text" name="usercode[]" style="width:70px;" /></td>
            <td><input type="text" name="buildname[]" style="width:150px;" /></td>
          </tr>
        </tbody>
      

  9.   

    点击复选框删除行的代码要修改一下：
    <input type="checkbox" onclick="GetRow(this)" />
    把this指针传递进去。你原先的代码通过获取window.event.srcElement属性的方法只能在IE中使用。function GetRow(obj) {
        cGetRow = obj.parentNode.parentNode.rowIndex; //这样获取行号，获取的是在table中的行号，而不是tbody中的行号
        DelRow(cGetRow);//点击checkbox时，直接删除行。
    }function DelRow(iIndex) {
        //删除一行
        if (iIndex == -99999) {
            alert("系统提示：没有选中行号!");
        } else {
            document.getElementsByTagName('table')[1].deleteRow(iIndex); //这样删除行
            iIndex == -99999; //将rowIndex恢复默认值。
        }
    }完整代码：
    <script type="text/javascript"> <!--language属性太老了，在HTML5中已经被废弃，应使用type属性，写代码要养成遵循规范的习惯-->
    var cGetRow=-99999;
    function insertrow(){
    var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
    document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
    }
    function GetRow(obj){
    //获得行索引
    //两个parentElement分别是TD和TR，rowIndex是TR的属性
    //this.parentElement.parentElement.rowIndex
    //cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
    cGetRow = obj.parentNode.parentNode.rowIndex;
    DelRow(cGetRow);//点击checkbox时，直接删除行。
    }
    function DelRow(iIndex){
    //删除一行
    if(iIndex==-99999){
    alert("系统提示：没有选中行号!");
    }else{
    document.getElementsByTagName('table')[1].deleteRow(iIndex);
    iIndex==-99999;//将rowIndex恢复默认值。
    }
    }
    </script>
    </head><body>
    <form action="chuli.php" method="post">
      <table>
        <tr>
          <td>名字</td>
        </tr>
        <tr>
          <td><input type="text" name="name" /></td>
        </tr>
      </table>
      <table border="1">
        <thead>
          <tr>
            <th width="40">删除</th>
            <th width="40">登记</th>
            <th width="70">用户号码</th>
            <th width="150">建筑名称</th>
          </tr>
        </thead>
        <tbody id="ACE_HIDDEN_TABLE" style="display:none">
          <tr>
            <td><input type="checkbox" onclick="GetRow(this)"/></td>
            <td><input type="text" name="record[]" style="width:40px;" /></td>
            <td><input type="text" name="usercode[]" style="width:70px;" /></td>
            <td><input type="text" name="buildname[]" style="width:150px;" /></td>
          </tr>
        </tbody>
        <tbody id="newTB">
        </tbody>
      </table>
      <div align="center" style="margin:10px;">
        <input type="button" onClick="insertrow();" value="增加一行">
        <!--<input type="button" onClick="DelRow(cGetRow);" value="删除一行">-->
      </div>
      <input type="submit" value="保存页面" style="width:120px;height:40px;" name="save" />
    </form>
      

  10.   


    谢谢，这样是可用的  
    还有就是还得麻烦你帮着看下   那个deleterow 变化的有点大   在我的主题上 是点击 checkbox即可删除改行，但是做了你这个变化后作用就变了   比如有5行  当点击第一至三行时，可以删除  好像是隔了两行那样
      

  11.   

    把display直接放在紧贴table的上面一行即可。