怎么用js设置一个按钮点击按钮可以添加table的行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用js设置一个按钮点击按钮可以添加table的行相关的知识，希望对你有一定的参考价值。
附1：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>动态添加删除表格</title>
<Script Language="javascript">
var cGetRow=-99999;
function AddRow()
//添加一行
var newTr = tab1.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">';
newTd1.innerText= '新增加行';
function DelRow(iIndex)
//删除一行
if(iIndex==-99999)
alert("系统提示：没有选中行号!");
else
tab1.deleteRow(iIndex);
function GetRow()
//获得行索引
//两个parentElement分别是TD和TR哟，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
function ShowRow()
//显示行号
alert(cGetRow);
//alert(document.getElementsByTagName("tr").length);
</script>
</head>
<body>
<table id="tab1" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1" on Click="GetRow()"></td>
<td id="a">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2" on Click="GetRow()"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td width=6%><input type=checkbox id="box3" on Click="GetRow()"></td>
<td id="c">第三行</td>
</tr>
</table>
<input type="submit" name="Submit" value="AddRow" on click="javascript :AddRow();">
<input type="submit" name="Submit" value="DelRow" on click="javascript :DelRow(cGetRow);">
<input type="submit" name="Submit" value="ShowRow" on click="javascript :ShowRow();">
</body>
</html>
附 2：
<HTML>
<HEAD>
<script LANGUAGE="JAVASCRIPT">
iIndex = 0; //试验一下加了int类型定义后如何？？？
var i= 0;
function showIndex()
alert(iIndex);
function getIndex()
iIndex = event.srcElement.parentElement.parentElement.rowIndex;
return iIndex;
function insertRow(iPos)
var otr=myTable.insertRow(i);
var ocell=otr.insertCell(0);
ocell.innerHTML="<input type=file name=aa >"
var ocell=otr.insertCell(1);
// ocell.innerText="bb"
ocell.innerHTML=" <input type=button onclick=deleteRow(getIndex()) value='删除"+ i +"'>";
i++;
function deleteRow(iPos)
document.all.myTable.deleteRow(iPos);
i--;
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1 width=600 >
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(0)" value="插入行">
</form>
</BODY>
</HTML>
附 3：
<script>
function deleteRow (tableID, rowIndex)
var table =document.all[tableID]
table.deleteRow(rowIndex);
</script>
<table id=mxh border=1>
<tr>
<td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
<tr>
<td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>
</tr>
</table>
<HTML>
<HEAD>
<script LANGUAGE="JAVASCRIPT">
iIndex = 0; //试验一下加了int类型定义后如何？？？
function showIndex()
alert(iIndex);
function getIndex()
iIndex = event.srcElement.parentElement.rowIndex;
function insertRow(iPos)
var otr=myTable.insertRow(iPos);
var ocell=otr.insertCell(0);
ocell.innerText="aa"
var ocell=otr.insertCell(1);
ocell.innerText="bb"
function deleteRow(iPos)
document.all.myTable.deleteRow(iPos);
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="getIndex()">
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type=button onclick="alert(iIndex)" value="show Index">
<input type=button onclick="insertRow(iIndex)" value="插入行">
<input type=button onclick="deleteRow(iIndex)" value="删除行">
</form>
</BODY>
</HTML>追问
可以写的简单一些吗？我就是想设置一个按钮能添加table中的一行！或者删除一行的。谢谢啦！
参考资料：动态生成Table的行、列以及删除等http://51weidi.com/html/2455.html
参考技术A html代码：<table border="1" >
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tbody id="mybody">
<tr>
<td>1001</td>
<td>张三</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
</tr>
</tbody>
</table>
<button id="btnAdd" value="添加新行"></button>jQuery代码：
<script type="text/javascript src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript>
$(function()
//按钮点击事件
$("#btnAdd").click(function()
//接收用户输入的列数据
var id=prompt("请输入学员编号：");
var name=prompt("请输入学员姓名：");
//构建新行
var newRow="<tr><td>"+id+"</td><td>"+name+"</td></tr>";
//为表格追加新行
$("#mybody").append(newRow);
);
);
</script> 参考技术B js设置一个按钮点击按钮可以添加table的行：
1、你先要根据table的ID获取到table实例
2、当单机按钮的时候，创建一个table行，然后添加到已经获取到的table中即可
具体可参考：
http://blog.csdn.net/adsdassadfasdfasdf/article/details/6047927
在问你个SWT插件的问题，我想在table表格的一个格当中添加多个图标按钮，怎么添加呢？
我看过一种形式，在一个格中有三个图标，点击每一个都可以有不同的操作，是怎么实现的？谢谢！
下面是在一个格中加两个按钮的例子，一个在左边，一个在右边，三个图标的只要在加一个就行，可以把 delEditor.horizontalAlignment = SWT.LEFT设为CENTER：
TableEditor delEditor = new TableEditor(table_translate);
delEditor.horizontalAlignment = SWT.LEFT;//按钮在单元格中的位置，有LEFT、CENTER、RIGHT
delEditor.minimumWidth = 75;//按钮的大小
Button deleteBut = new Button(table_translate, SWT.NONE);//table_translate是Table类型对象，即要在上面画按钮的那个表格
deleteBut.setText("删除");//按钮显示的文字，也可以使用图片,用deleteBut.setImage();方法
delEditor.setEditor(deleteBut, item, 2);//指定按钮deleteBut在TableITem（即item，表格行）的第二列,从0开始
item.setData(UIConstants.EDITOR_BUTTON_DELETE, deleteBut);
deleteBut.addSelectionListener(new DeleteButtonListener(item));//按钮对应的操作，//DeleteButtonListener是继承自SelectionAdapter的类，在该类中的widgetSelected方法中写该按钮具体的操作
TableEditor delEditor1 = new TableEditor(table_translate);
delEditor1.horizontalAlignment = SWT.RIGHT;
delEditor1.minimumWidth = 75;
Button deleteBut1 = new Button(table_translate, SWT.NONE);
deleteBut1.setText("添加");
delEditor1.setEditor(deleteBut1, item, 2);
item.setData(UIConstants.EDITOR_BUTTON_DELETE, deleteBut1);
deleteBut1.addSelectionListener(new DeleteButtonListener(item));//按钮对应操作
效果图如下：
来自：求助得到的回答 参考技术A 这个需要覆盖表格的方法 具体是什么我忘记了 边个的显示是用的cellRender 而当你鼠标放上去的时候 他就会渲染cellEditor 你从这里入手看看嘛
以上是关于怎么用js设置一个按钮点击按钮可以添加table的行的主要内容，如果未能解决你的问题，请参考以下文章
easyui, 一个js页面中怎么使得点击A页面中的增加按钮，用$（'#table'）.window();打开B页面id="table"