怎样做一个可编辑且可多选的Table?

qian_zhigang 2002-06-18 10:41:55
怎样做一个可编辑且可多选的Table?
...全文
111 11 打赏 收藏 转发到动态 举报
写回复
用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的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言， 1、main.jsx import React from 'react'; import ReactDom from 'react-dom'; import ExampleTable from './ExampleTable.jsx' ReactDom.render( Table>, document.getElementById('Ap
一个table控件
一个table控件，易于使用和修改，类似于ext.js的table控件
JavaScript

87,994

社区成员

224,689

社区内容

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

加载中

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

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

+ 用AI写文章