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

fozzainter 2012-06-29 01:25:42
我在这里面写的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>
...全文
625 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
foxlovw0813 2012-06-29
  • 打赏
  • 举报
 回复
把display直接放在紧贴table的上面一行即可。
fozzainter 2012-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 的回复:]

点击复选框删除行的代码要修改一下：
<input type="checkbox" onclick="GetRow(this)" />
把this指针传递进去。你原先的代码通过获取window.event.srcElement属性的方法只能在IE中使用。

JScript code
function GetRow(obj) {
cGetRow = obj.parentNode.p……
[/Quote]

这部分问题总算解决了 对于JS的理解还不够啊
感谢耐心 快速的回复
fozzainter 2012-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]

引用 8 楼 的回复:

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


那按理说 应该是按
<tr>
<td width="40">删除</td>
<td width="40">登记</td>
<td width="70">用户号码</td>
<td width="150">建……
[/Quote]

谢谢，这样是可用的
还有就是还得麻烦你帮着看下 那个deleterow 变化的有点大 在我的主题上 是点击 checkbox即可删除改行，但是做了你这个变化后作用就变了 比如有5行 当点击第一至三行时，可以删除 好像是隔了两行那样
乌镇程序员 2012-06-29
  • 打赏
  • 举报
 回复
点击复选框删除行的代码要修改一下：
<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>

乌镇程序员 2012-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]

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


那按理说 应该是按
<tr>
<td width="40">删除</td>
<td width="40">登记</td>
<td width="70">用户号码</td>
<td width="150">建……
[/Quote]

哦。。。是我弄错了。单元格内容超过设置的宽度值时会撑开单元格的，文本框元素有个默认的宽度（默认的宽度值在各浏览器下还各有差异。可以给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>
fozzainter 2012-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 的回复:]
宽度由整个表格的第一行控制，即thead->tr中各单元格width属性值或style width样式值决定。
[/Quote]

那按理说 应该是按
<tr>
<td width="40">删除</td>
<td width="40">登记</td>
<td width="70">用户号码</td>
<td width="150">建筑名称</td>
</tr> 这个的设定控制

我现在将display设置为none
打开这个页面 可以看到 是我第一行处理的宽度
点击增加一行，这时整个表格的宽度就被拉宽
在IE6/chrome中测试都是这样

还有就是按此方法改进后,原JS是点击checkbox即可删除此列，
但是改完后就不行了

再次麻烦帮着测试下 谢谢

乌镇程序员 2012-06-29
  • 打赏
  • 举报
 回复
宽度由整个表格的第一行控制，即thead->tr中各单元格width属性值或style width样式值决定。
fozzainter 2012-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]
一个表格可以有多个tbody元素，表格代码改成这样：

HTML code

<table>
<tr>
<td>名字</td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
</tr>
</table>
<table border="1">
……
[/Quote]

做了修改之后
能够成功的对齐了，但是 宽度 被拉到新增的行的宽度了
这个宽度貌似是固定的？ 需要在哪里设定呢？
我的期望的是按照 我设定的宽度来走 毕竟 写 姓名与地址之类 所需要的不一样 要不看着太难受了

麻烦帮着看下 谢谢
johnny_ 2012-06-29
  • 打赏
  • 举报
 回复 


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里面不是更好。
xierong2011 2012-06-29
  • 打赏
  • 举报
 回复
<col style=" width:5%; "/>写该在<table>下面即可
xierong2011 2012-06-29
  • 打赏
  • 举报
 回复
用<col style=" width:5%; "/>代表第一列
<col style=" width:5%; "/>代表第二列
<col style=" width:5%; "/>代表第三列
以此类推。。。。可随意控制样式
三石-gary 2012-06-29
  • 打赏
  • 举报
 回复
<table width="1250" border="1">
<!-- 插入新行的区域 begin -->
<tbody id="newTB">
</tbody>
<!-- 插入新行的区域 end -->
</table>

去掉这里的width
乌镇程序员 2012-06-29
  • 打赏
  • 举报
 回复
一个表格可以有多个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>
js中设置td样式不好使，ie浏览器td不能铺满表格问题解决
js中设置td样式不好使，ie浏览器td不能铺满表格问题解决可能性1：属性名称写错可能性2 : 因为是td啊~ 会写这个是因为昨天发现直接设定的td宽为100%在ie浏览器里面竟然没横向铺满表格，就想着在js里设置一下，结果遇到了这个问题。解决后做个备注，下次遇到还能来找找。 可能性1：属性名称写错 有一些属性中间是带小横杠的，比如margin-top，在js中设置此类属性时需要去掉横杠，且横杠后...
html tr加样式,Javascript操作table,tr,td和表格CSS样式设置小常识
效果图：方法一姓名性别住址电话张三男...关于html中table表格tr,td的高度和宽度做网页的时候经常会遇到各种各样的问题，经常遇到的一个就是会碰到表格宽度对不齐的问题。.mytab{ border-collapse: co...
table表格相关属性和样式
如果指定了单元格的宽度，则会按指定的宽度限定每个单元格宽度，跟内容无关（如果指定的是比例，会永远保持这个比例），这样就可能出现内容飘到单元格之外的情况。table.rows[0].cells 是获取到第一个 tr 行 里面所有的 td（或者th） （应该也是个类数组）在js中，获得表格单元格在哪一行哪一列，需要使用到单元格对象的rowIndex属性和cellIndex属性。rowIndex 是 tr 元素才有的属性， cellIndex 是 td（或者th） 才有的属性；
td内容部分显示
第一次写博客，写得不好，还请见谅！写这的原因是因为之前在项目中或者平时遇到问题我会把它记下来保存在手机中，时不时拿出来翻一翻，但是今天在手机清理的时候不小心将其中一部分删掉了，再也找不回来，因此，为了避免以后类似的事情发生，我决定把它保存在csdn这个平台上。   定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则。 固定表格布局： 固定表格布局与自动表格布局相...
td 属性 noWrap 防止折行、撑开(及其它文字换行问题)
我用为td中noWrap属性来防止td数据折行 noWrap="noWrap">${msg.cspName}  解决问题期间查询了些网络资料，以备后用  td中的nowrapurl：http://linder0209.javaeye.com/blog/319160http://blog.csdn.net/lin0shyi1/archive/2009/03/
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章