`
zha_zi
  • 浏览: 585426 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

table 添加删除row

J#JavaScriptJSP 
阅读更多 
<body> 
 
<table  width="100%" id="detailItem">
<tr><td align="center"><b>学历信息</b></td></tr>
<table>
<table cellspacing="1" cellpadding="1" border="1" width="100%" id="detailItem"> 
  <tbody id="detailItemBody"> 
  <tr> 
    <td nowrap="" width="8%" align="center" class="content_info_items">学校</td> 
    <td nowrap="" width="8%" align="center" class="content_info_items">开始时间</td> 
    <td nowrap="" width="10%" align="center" class="content_info_items">结束时间</td> 
    <td nowrap="" width="10%" align="center" class="content_info_items">学历</td> 
    <td nowrap="" width="18%" align="center" class="content_info_items">专业</td> 
    <td nowrap="" width="8%" align="center" class="content_info_items">毕业？</td> 
   
    <td width="10%" align="center" class="content_info_items">操作</td> 
  </tr> 
  <tr id="tr1"> 
    <td width="8%" id="td1"  > <div align="center"> <input type="text"  size="8" name="SampleOrderContentID"/> </div></td> 
    <td nowrap="" width="8%" ><div align="center"><input type="text" size="8" name="ItemNo" id="ItemNo1"/> </div></td> 
    <td nowrap="" width="10%"  ><div align="center"> <input type="text" size="10" name="Nickname" id="Nickname1"/></div></td> 
    <td nowrap="" width="10%"  ><div align="center"><input type="text" size="8" name="Cleats" id="cleats1"/><div></td> 
    <td nowrap="" width="10%" > <div align="center"><input type="text" size="8"> <div></td> 
    <td nowrap="" width="8%"  ><div align="center"><input type="text"   size="4" name="Size" id="Size1"/></div></td> 
    
    <td nowrap="" width="10%"  > 
<!--input name="btnAdd" type="button" id="btnAdd" value="Add" onClick="Add('order-add-line.jsp')"--> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/> 
<input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'delete')" value="Delete" id="btnDelete" name="btnDelete" style="visibility:hidden "/></td> 
  </tr> 
</tbody> 
</table> 
 
<script type="text/javascript"> 
function addOrderRow(tab,rowNum,colNum,obj,addType) 
        { 
var detailbody=document.getElementById(tab); 
var row = document.createElement("tr"); 
var newrow=obj.parentNode.parentNode.innerHTML; 
if(addType=='add'){ 
var row = detailbody.insertRow(); 
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ 
var cell=row.insertCell(); 
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; 
//如果表单中有值就清空 
for(var k=0;k<cell.childNodes.length;k++){ 
	if (cell.childNodes[k].type == 'text') { cell.childNodes[k].value = ''; } 
	if (cell.childNodes[k].type == 'textarea') { cell.childNodes[k].value = ''; } 
	if (cell.childNodes[k].type == 'checkbox') { cell.childNodes[k].checked = false; } 
	if (cell.childNodes[k].type == 'radio') { cell.childNodes[k].checked = false; } 
	if (cell.childNodes[k].type == 'select-multiple') { cell.childNodes[k].selectedIndex = -1; } 
	if (cell.childNodes[k].type == 'select-one') { cell.childNodes[k].selectedIndex = -1; } 
} 
//cell.innerHTML=arr[i]; 
} 

}else if(addType=='copy'){ 
//copy 
//detailbody.insertRow().insertCell().innerHTML = newrow;   ok 
var row = detailbody.insertRow(); 
for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ 
var cell=row.insertCell(); 
cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; 
} 
}else{ 
//delete 
if(confirm("Are you sure to delete this record?")){ 
    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
}else{ 
return false; 
} 
} 
//只显示最后一个add按钮 
var leg = detailbody.childNodes.length; 
if(leg>1){ 
for(var j=0;j<leg-2;j++){ 
document.getElementsByName("btnAdd")[j].style.visibility="hidden"; 
} 
  document.getElementsByName("btnAdd")[leg-2].style.visibility="visible"; 
  //document.getElementsByName("btnDelete")[0].style.visibility="hidden"; 
   } 
//显示除第一个外所有delete按钮 
if(leg>1){ 
  for(var j=1;j<leg-1;j++){ 
document.getElementsByName("btnDelete")[j].style.visibility="visible"; 
} 
} 
        } 
</script> 
</body>

 

分享到：
| 如何用js调用网页上嵌套的adobe reader 的 ...
评论
1 楼 liuboyu1991 2010-08-27  
java之爷爷
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    小程序 点按钮添加TableRow源码.rar

    免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方...如有侵权，请举报或通知本人删除。

    小程序源码 辅助类库 点按钮添加TableRow源码.rar

    免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方...如有侵权，请举报或通知本人删除。

    利用js动态添加删除table行的示例代码

    如下所示： 代码如下://动态添加行function addRow(){ var table = document.getElementById(“tableID”); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格 ...

    JQuery动态给table添加、删除行 改进版

    代码如下:&lt;... &lt;head&gt; &lt;title&gt; &lt;/title&gt;... function addNew() { var table1 = $(‘#table1’); var firstTr = table1.find(‘tbody&gt;tr:first’); var row = $(“&lt;tr&gt;&lt;/tr&gt;”); var

    vue+element实现表格新增、编辑、删除功能

    需要做一个需求：新增一个xml文件时，添加数量不确定、属性相同的xml标签，想了想可以用表格做啊，属性相同，使用...&lt;el type=success click=addRow(tableData)&gt;新增 &lt;el-table :data=tableData style=width:

    hbase各种例子新增修改删除批量导入

    hbase各种例子新增修改删除批量导入： public static void main(String[] args) throws IOException { Configuration conf = HBaseConfiguration.create(); HBaseHelper helper = HBaseHelper.getHelper(conf); ...

    table.js:HTML 表控制器（addremovesortsearch 行）

    #Table.js HTML 表格控制器（添加/删除/排序/搜索行） ＃＃下载 通过bower install table.js或npm install table.js ##API 快速入门 表构造器 var myTable = new Table ( { 'id' : 'myTable' , // id of table ...

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    [removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i&lt;6;i++){var row=document.createElement(“tr”);row.id=

    JQuery实现动态表格点击按钮表格增加一行

    动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下

    学生信息系统

    String sql="delete from 学生信息表 where 学号 = '"+table.getValueAt(table.getSelectedRow(),0)+"'"; //JOptionPane.showMessageDialog(null, sql, "温馨提示", JOptionPane.INFORMATION_MESSAGE); ...

    一个简单实用的数据库操作框架

    　把数据库中的一张或多张表抽象成类Table，这个类中提供对表的添加，修改，删除的JDBC封装。 　将数据库表中的一条记录抽象成类Row，这个类用HashMap保存关系数据库中表格中一行数据的字段名和值并提供一些相关操作...

    点击按钮可添加列表功能

    点击按钮可添加列表功能，该项目实现了动态添加TableRow的效果，通过点击屏幕右上角“添加”按钮，系统会自动添加一行视图， 可以编辑任意一行中的控件并可对其删除操作，具体如效果图所示。

    pyqt5 TableWidget

    pyqt5 TableWidget逐行尾部添加，逐列写入，双for嵌套 绝对原创，拒绝抄袭！ 搜索了好多篇博客论坛均无找到此功能，只能靠自己了。 try: for row_name in glo.dict.keys(): if glo.dict[row_name][0] == False: # ...

    简单的php留言板

    简单的留言板 ... ?&gt; echo "&lt;div align='center'&gt;&lt;a href='add.php'&gt;继续添加&lt;/a&gt;&lt;/div&gt;";...&gt;"&gt;删除 &lt;/td&gt; 内容：$row['content']?&gt; $row['lastdate']?&gt; $row['dtUpdate']?&gt; } ?&gt; &lt;/table&gt; ?&gt;

    js简单的表格添加行和删除行操作示例

    代码如下: &lt;... &lt;... } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $(“#addrow”).bind(“click”,function(){ // 取得table var tab = $(“#ta

    angular动态删除ng-repaeat添加的dom节点的方法

    本文介绍了angular动态删除ng-repaeat添加的dom节点的方法，分享给大家供大家参考，具体如下： 通过点击删除按钮删除数据库信息以及当前行 html代码如下: &lt;div class=row&gt; &lt;!-- PAGE CONTENT BEGINS --&gt;...

    jQuery+Datatables实现表格批量删除功能【推荐】

    最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1：点击全选的选择框CheckBox，选中以下列表中所有的选择框 2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框 3：单选某个...

    用javascript删除当前行,添加行(示例代码)

    删除行 代码如下:[removed] function del(obj) { obj[removed][removed].removeNode(true); } [removed] &lt;body&gt; &lt;table&gt;  单元格1 &lt;td&gt;&lt;input type=button value=”delete this row” ...

    jquery 动态增加删除行的简单实例(推荐)

    最近写程序，碰巧有动态增加删除行，下面就记录一下 html就不写了，也没有什么，直接上核心了 新增行 function addRow(obj){ 　//获得table一共有多少行，方便追加的时候给序号赋值 var length = $(#grid tr)....

    mysql数据库的基本操作语法

    删除table中的数据，可以删除所有，带条件可以删除指定的记录。 删除所有数据 delete from temp; 删除指定条件数据 delete from temp where age &gt; 20; Ø select 查询、function 函数 select查询语句用得最广泛、...

Magicbox
Global site tag (gtag.js) - Google Analytics