社区
JavaScript
帖子详情
怎样做一个可编辑且可多选的Table?
qian_zhigang
2002-06-18 10:41:55
怎样做一个可编辑且可多选的Table?
...全文
111
11
打赏
收藏
怎样做一个可编辑且可多选的Table?
怎样做一个可编辑且可多选的Table?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
11 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
emu
2002-06-18
打赏
举报
回复
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
function deleteLine()
{
for (var i=tbody1.children.length-1; i>=0 ; i-- )
if (tbody1.children[i].firstChild.firstChild.checked)
tbody1.deleteRow(i);
}
function addLine()
{
elm = thead1.lastChild.cloneNode(true)
elm.style.display="";
tbody1.insertBefore(elm);
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead id=thead1>
<tr>
<th></th>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</tr>
<TR style="display:none">
<td><input type=checkbox id=checkLine></td>
<TD>000</TD>
<TD>000</TD>
<TD>000</TD>
</TR>
</thead>
<tbody onclick="showinput()" id=tbody1>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
<button onclick="deleteLine()">删除</button>
<button onclick="addLine()">添加</button>
</td>
</tr>
</tfoot>
</TABLE>
</body>
</html>
emu
2002-06-18
打赏
举报
回复
是不是要这样?
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
function deleteLine()
{
for (var i=tbody1.children.length-1; i>=0 ; i-- )
if (tbody1.children[i].firstChild.firstChild.checked)
tbody1.deleteRow(i);
}
function addLine()
{
elm = thead1.lastChild.cloneNode(true)
elm.style.display="";
tbody1.insertBefore(elm);
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead id=thead1>
<tr>
<th></th>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</tr>
<TR style="display:none">
<td><input type=checkbox id=checkLine></td>
<TD>000</TD>
<TD>000</TD>
<TD>000</TD>
</TR>
</thead>
<tbody onclick="showinput()" id=tbody1>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
<button onclick="deleteLine()">删除</button>
<button onclick="addLine()">添加</button>
</td>
</tr>
</tfoot>
</TABLE>
</body>
</html>
emu
2002-06-18
打赏
举报
回复
唉,又要写这个东西。谁有现成的没有?贡献一个出来嘛。
qian_zhigang
2002-06-18
打赏
举报
回复
就是可以多行选择并可删除
Andrawu
2002-06-18
打赏
举报
回复
能讲得具体点吗?
emu
2002-06-18
打赏
举报
回复
要编辑很好办,要“多选”,你得解释一下是什么意思。
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</thead>
<tbody onclick="showinput()">
<TR>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
</TABLE>
</body>
emu
2002-06-18
打赏
举报
回复
可编辑很好办啊。
可多选是什么意思?
emu
2002-06-18
打赏
举报
回复
呵呵,忘了判断,我的脚本调试没有打开的。更正:
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
if (elm.tagName != "TD") return;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
function deleteLine()
{
for (var i=tbody1.children.length-1; i>=0 ; i-- )
if (tbody1.children[i].firstChild.firstChild.checked)
tbody1.deleteRow(i);
}
function addLine()
{
elm = thead1.lastChild.cloneNode(true)
elm.style.display="";
tbody1.insertBefore(elm);
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead id=thead1>
<tr>
<th></th>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</tr>
<TR style="display:none">
<td><input type=checkbox id=checkLine></td>
<TD>000</TD>
<TD>000</TD>
<TD>000</TD>
</TR>
</thead>
<tbody onclick="showinput()" id=tbody1>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
<button onclick="deleteLine()">删除</button>
<button onclick="addLine()">添加</button>
</td>
</tr>
</tfoot>
</TABLE>
</body>
</html>
emu
2002-06-18
打赏
举报
回复
呵呵,忘了判断,我的脚本调试没有打开的。更正:
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
if (elm.tagName != "TD") return;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
function deleteLine()
{
for (var i=tbody1.children.length-1; i>=0 ; i-- )
if (tbody1.children[i].firstChild.firstChild.checked)
tbody1.deleteRow(i);
}
function addLine()
{
elm = thead1.lastChild.cloneNode(true)
elm.style.display="";
tbody1.insertBefore(elm);
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead id=thead1>
<tr>
<th></th>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</tr>
<TR style="display:none">
<td><input type=checkbox id=checkLine></td>
<TD>000</TD>
<TD>000</TD>
<TD>000</TD>
</TR>
</thead>
<tbody onclick="showinput()" id=tbody1>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
<button onclick="deleteLine()">删除</button>
<button onclick="addLine()">添加</button>
</td>
</tr>
</tfoot>
</TABLE>
</body>
</html>
emu
2002-06-18
打赏
举报
回复
呵呵,ie版本呢?
flylyke
2002-06-18
打赏
举报
回复
to emu(ston)
当点击checkbox的时候会出现运行时未知错误!!
bootstrap插件_
table
可
编辑
表格_demo
bootstrap插件_
table
可
编辑
表格_demo,集成插件对表格可
编辑
以及小插件的使用
Bootstrap
Table
表格插件,简单配置便可拥有强大的单选、多选、排序、分页,以及
编辑
、导出、过滤等等..zip
Bootstrap
Table
表格插件,简单配置便可拥有强大的单选、多选、排序、分页,以及
编辑
、导出、过滤等等..zip,与一些最广泛使用的css框架集成的扩展表。(支持bootstrap、语义ui、bulma、material design、foundation、vue.js)
uniapp-
table
中改版uni-
table
插件
改版uni-
table
插件功能,新增单击行事件、单击某td事件、单独修改某td的字体颜色;选中行样式修改。主要修改文件uni-tr、uni-td;
react+ant design实现
Table
的增、删、改的示例代码
本人小白一名,第一次学习react ,该资料为本人原创,采用的是react+ant design的
Table
d的
一个
小demo,暂时只实现了增加,删除单行,多行删除有Bug,查看详情,呕心沥血耗时一周完成,禁止抄袭,转载请先留言, 1、main.jsx import React from 'react'; import ReactDom from 'react-dom'; import Example
Table
from './Example
Table
.jsx' ReactDom.render(
Table>, document.getElementById('Ap
一个
table
控件
一个
table
控件,易于使用和修改,类似于ext.js的
table
控件
JavaScript
87,994
社区成员
224,689
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章