JS 控制 td显示 为什么我的操作只显示了一行

JavaScript046

JS 控制 td显示 为什么我的操作只显示了一行,第1张

提问的时候格式化下代码不会吗? 你知道对有强迫症的人来说,看着就烦你知道么!

window.onload=function()//用window的onload事件,窗体加载完毕的时候

{

   var cmdtype="${requestScope.cmdtype}"

   if(cmdtype=='3'){

  document.getElementById("tdssh").style.display=""

    }else{

     return false

    }

} <table>

 <c:forEach var="list" items="${requestScope.list }" varStatus="cindex">

<tr height="26"  

    <c:if test="${cindex.count % 2 ==0? true:false }">

         style="background-color:#bac9e0"

     </c:if> 

     onmouseover="mouseoverHandler(this)" 

     onmouseout="mouseoutHandler(this)">

     

    <td id="tdssh" style="text-align:center" nowrap >

<c:if test="${list.sshmode=='0' }"> 普通SHELL模式</c:if>

<c:if test="${list.sshmode=='1' }"> 启动X11</c:if>

<c:if test="${list.sshmode=='2' }"> 远程命令模式</c:if>

<c:if test="${list.sshmode=='3' }">远程命令模式且启动X11</c:if>

   </td>

    </tr>

  </c:forEach>

</table>

1,Javascript操作table,tr,td ,代码如下:function messageSort() { --函数名var message=document.getElementById("message").value--添加的内容(下面有对应的html)if(name == "" ) return--如果添加为空,返回var row = document.createElement("tr")//创建tr的row.setAttribute("id", name)--设置row的属性. var cell = document.createElement("td")//创建tdcell.appendChild(document.createTextNode(name))//td里注入文本row.appendChild(cell)//将TD注入TRvar deleteButton = document.createElement("input")//这部分是添加删除button按钮deleteButton.setAttribute("type", "button")deleteButton.setAttribute("value", "删除")deleteButton.onclick = function () { deleteSort(name)}cell = document.createElement("td")cell.appendChild(deleteButton)//注入按钮row.appendChild(cell)//将TD注入TRdocument.getElementById("sortList").appendChild(row)//将TR注入到相应地方(sortList可以看下面html)var cell5 = document.createElement("td")cell.style.background="#ffffff"//背景颜色设置row1.style.color="#ffffff"//字体颜色设置cell5.style.display = "none" //ie不支持setAttribute("style", "display:none")// <td style="display:none" >dd</td>直接写TD是这样..cell5.appendChild(document.createTextNode(zdid))row.appendChild(cell5)}// 删除内容function deleteSort(id) {//这个函数为上面的删除button调用的var rowToDelete = document.getElementById(id)var sortList = document.getElementById("sortList")sortList.removeChild(rowToDelete)}</script></head><body><table border="0" cellspacing="0" width="400" bgcolor="#f5efe7"><tr><td height="20">增加内容:</td><td><input id="message" type="text"></td><td><a href="javascript:messageSort()">添加</a></td></tr></table><table border="1" width="400"><tr><td height="20" align="center">内容:</td><td>操作</td></tr><tbody id="sortList"></tbody></table></body>2,一般情况下定义一个效果良好的表格采用下面的属性定义方式代码:<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapsetable-layout: fixed'></table>当某个td中没有内容或者没有可见元素时,td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段:.text-overflow{ display:block/*内联对象需加*/ width:31emword-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden一起使用。*/ } 3,但对于表格table来讲是有些不同,代码段:table{ width:30emtable-layout:fixed/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。*/ }

你这个写的好复杂,给你个思路,你要做的是16个input4x4矩阵分布,那么利用2维数组,input的id(你的代码里有name,但是加上id更便于控制)设置为id="t[row][col]",然后代码就简单了,onkeypress的时候,先判断出是上下左右哪个按键,如果是上,则row-1,col不变,如果是左,则row不变col-1。下和右与上、左对应。计算出目标的row、col之后,只要document.getElementById("t"+row+col).focus()就可以了。当然,你要自行盘断下row和col的取值范围,保证不会超界