社区
JavaScript
帖子详情
在table中加入tr的问题
zhaoxichao
2003-07-24 12:41:27
点击一个“新增”按钮,在table中加入一个tr,内容是<td>n</td>
点击一个“删除”按钮,从table中删除一个tr
怎么做,谢谢
...全文
64
4
打赏
收藏
在table中加入tr的问题
点击一个“新增”按钮,在table中加入一个tr,内容是n 点击一个“删除”按钮,从table中删除一个tr 怎么做,谢谢
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
zhaoxichao
2003-07-24
打赏
举报
回复
up
kingdomzhf
2003-07-24
打赏
举报
回复
function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
}
nr = document.createElement("TR");
p.insertBefore(nr, r);
select(nr);
addCell();
return nr;
}
function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
p.removeChild(r);
lastSelection = null;
return r;
}
function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}
nc = document.createElement("TD");
text = document.createTextNode("New Cell");
nc.insertBefore(text, null);
r.insertBefore(nc, c);
select(nc);
return nc;
}
function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
p = c.parentElement;
p.removeChild(c);
lastSelection = null;
return c;
}
function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
EditCell.style.display = "";
EditCell.value = c.innerHTML;
c.setExpression("innerHTML", "EditCell.value");
EditCell.focus();
EditCell.onblur = unhookContentsExpression;
}
function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}
function editStyle() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
EditStyle.style.display = "";
EditStyle.value = c.style.cssText;
c.style.setExpression("cssText", "EditStyle.value");
EditStyle.focus();
EditStyle.onblur = unhookStyleExpression;
}
function unhookStyleExpression() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");
EditStyle.value = '';
EditStyle.style.display = "none";
}
function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
if (r.rowIndex == 0)
return;
ls = r.previousSibling;
p = ls.parentElement;
p.insertBefore(r, ls);
return r;
}
function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
ls = r.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(r, ls);
return r;
}
function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.previousSibling;
if (ls == null)
return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
function nothingSelected() {
return (lastSelection == null);
}
function rowSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TR")
}
function cellSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TD")
}
function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}
</script>
kingdomzhf
2003-07-24
打赏
举报
回复
<html>
<head>
<style>
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
</head>
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<div id=TableContainer>
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr>
</tbody>
</table>
</div>
<br><br><br>
<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"><br>
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"><br>
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"><br>
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"><br>
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"><br>
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"><br>
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"><br>
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"><br>
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();">
<input type=text style="display: none; width: 400px;" id=EditCell><br>
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();">
<input type=text style="display: none; width: 400px;" id=EditStyle><br>
<script>
var lastSelection = null;
ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");
function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
TableContainer.onclick = select;
function cancelSelect() {
if (window.event.srcElement.tagName != "BODY")
return;
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}
document.onclick = cancelSelect;
function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}
jsidiot
2003-07-24
打赏
举报
回复
<table border=1 cellspacing=0 cellpadding=0 width=50% id=tab>
<tr>
<td>test</td>
</tr>
</table>
<script>
function add(){
var tr = tab.insertRow();
var td = tr.insertCell();
td.innerHTML = 'n';
}
add();
</script>
我看过好多中写法
都忘记了。你可以查一下
Vue组件
table
里面
加入
tr
组件、ul单面
加入
li组件
问题
<body> <!--
table
/
tr
/和ul/li组件
中
的小bug 使用is别名解决 就不会在多出标签,组件在标签外面 --> <div id="app"> <
table
> <!-- is不加: --> <
tr
is="row"></
tr
> </
table
> </div> </body> <script>.
table
无法设置
tr
边框的原因与解决方法
html
中
table
设置
tr
行边框 由于
table
中
的每个单元格都有独立的边框,即每个td都有自己的边框,而一个
tr
中
包含多个td。如下图所示,各个td
中
有间隔 即无法为
tr
设置边框。 要想为
tr
设置边框,需将
tr
中
所有的td共享一个边框。 在
table
样式
中
加入
border-collapse: collapse; 即将td合并为一个单一的边框,从而可以对
tr
进行边框设置。 当然可以以在
table
中
设置cellspacing为0,即td之间无间隔,再设置border,各个td之间的边框便可以连接起来,
关于html
中
使用
table
表格
tr
不换行的
问题
在写注册界面的时候尝试用
table
表格来写用户注册信息 但是在写的时候发现
tr
没有换行 一开始以为是因为
tr
属性的原因,所以尝试了display:block; 结果当然不可行 原因其实很简单 因为在
tr
中
没有
加入
td标签的时候,浏览器辨别你的其实都是
tr
标签 简单的说,它认为你是在同一个
tr
里面,理所当然在同一行 解决方案也很简单 只要在每个
tr
里面用上td标签就可以 即:
html遍历
table
tr
,js
中
获取
table
节点各
tr
及td的内容简单实例
js
中
获取
table
节点各
tr
及td的内容简单实例2019-01-06编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了js
中
获取
table
节点各
tr
及td的内容简单实例,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。第一行第二行第三行第四行如上所示代码,按钮点击事件
中
传入this对象,此对象就是按钮本身。通过以下方法测试获取表格的数据获取的方法一...
html
中
table
追加
tr
,html怎么给
table
标签动态添加
tr
满意答案yipa017apq推荐于 2016.06.25采纳率:49%等级:9已帮助:464人htm给
table
标签动态添加
tr
(行),具体参考代码如下:usually function序号姓名年龄生日备注删除用户输入表单:姓名年龄生日备注添加function del(obj){//alert($(obj).closest("
tr
").at
tr
("outerHTML"));//$(obj...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章