<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>增加Table行</title>
</head>
<script type="text/javascript" language="javascript">//设置文本框全选
function SlectAll(ckAllValue, chkvalue) {
var ckallObj = document.getElementsByName(ckAllValue);//获取全选项框的obj
var chkObj = document.getElementsByName(chkvalue); //获取要改变的obj
for (var i = 0; i < chkObj.length; i++) {
chkObj[i].checked = ckallObj[0].checked;
}
}
function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document; if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document; theObj =
theObj.substring(0, p);
} if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj
= theDoc.forms[i][theObj]; for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document); if (!foundObj &&
document.getElementById) foundObj = document.getElementById(theObj); return foundObj;
}
//添加一个参与人填写行
function AddSignRow() { //读取最后一行的行号,存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);
var codevalue=["a","b"];
var namevalue=["c","d"];
var signFrame = findObj("SignFrame", document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加选者框
var newCkTD=newTR.insertCell(0);
newCkTD.style.width="25px";
newCkTD.innerHTML = "<input id='chk_" + rowID + "' name='chk1' type='checkbox' value='"+rowID+"'/>";
//添加列:序号
//var newNameTD = newTR.insertCell(1);
// newNameTD.style.width="25px";
//添加列内容
// newNameTD.innerHTML =(newTR.rowIndex+1).toString();
//添加列:空港代码
var newNameTD = newTR.insertCell(1);
newNameTD.style.width="100px";
//添加列内容
newNameTD.innerHTML = "<select name='SelCode" + rowID + "' id='SelCode" + rowID + "' ><option value='XYZ'>XYZ</option></select>";
for(var i=0;i<codevalue.length;i++) //添加选择项
{
document.getElementById("SelCode"+rowID).options.add(new Option(codevalue[i],codevalue[i]));
}
document.getElementById("SelCode"+rowID).value="a";
//添加列:空港名称
var newEmailTD = newTR.insertCell(2);
newEmailTD.style.width="100px";
//添加列内容
newEmailTD.innerHTML = "<select name='SelName" + rowID + "' id='SelName" + rowID + "'><option value='dd'>dd</option></select>";
for(var i=0;i<namevalue.length;i++) //添加选择项
{
document.getElementById("SelName"+rowID).options.add(new Option(namevalue[i],namevalue[i]));
}
document.getElementById("SelName"+rowID).value="c";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();
}
//删除指定行
function DeleteSignRow(rowid) {
var signFrame = findObj("SignFrame", document);
var signItem = findObj(rowid, document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序号,如果没有序号,这一步省略
// for (i = rowIndex+1; i < signFrame.rows.length; i++) {
// signFrame.rows[i].cells[1].innerHTML = i.toString();
// } -->
} //清空列表
function ClearAllSign() {
if (confirm('确定要删除选中的数据吗?')) {
var arrstr=new Array();
var signFrame = findObj("SignFrame", document);
var rowscount = signFrame.rows.length;
var chkvalue=document.getElementsByName("chk1"); //获取选中的行
//循环删除行,从最后一行往前删除
var j =0;//记录是否选择数据
for (i = rowscount -1; i >= 0; i--) {
if(chkvalue[i].checked)//将用户选择的checkbox的值存入数组
{
arrstr.push(chkvalue[i].value);
}
}
for(var i=0;i<arrstr.length;i++)//删除用户选择的记录
{
DeleteSignRow(arrstr[i]);
}
chkvalue=document.getElementsByName("chk1");
for(var i=0;i<chkvalue.length;i++)
{
chkvalue[i].checked=false;
}
//重置最后行号为1
//var txtTRLastIndex = findObj("txtTRLastIndex", document);
// txtTRLastIndex.value = "1";
//预添加一行
//AddSignRow();
}
}
</script>
<body>
<div style="height:20px;width:225px;">
<table border="1" cellpadding="2" cellspacing="0" id="la" style="width:228px;height:100%;font-size:12px;border-collapse:collapse">
<tr id="tr1">
<td bgcolor="#96E0E2" style="width: 25px"><input type="checkbox" name="chkbvalue1"onclick="SlectAll('chkbvalue1','chk1')"></td>
<td bgcolor="#96E0E2" style="width: 100px">空港代码</td>
<td bgcolor="#96E0E2" style="width: 100px">空港名称</td>
</tr>
</table>
</div>
<div style="overflow:scroll;height:200px;width:225px">
<table border="0" cellpadding="2" cellspacing="1" id="blotue" style="width:100%;font-size:12px">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="1" id="SignFrame" style="width: 100%">
</table>
</td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="增加" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="删除" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1"/>
</div>
</body>
</html>
- 大小: 15.8 KB
分享到:
相关推荐
jqTable:一款集所有交互于一身的table组件 功能包括: 动态表格数据,提供更新数据方法 表格头部固定,支持多级表头 左右列可选固定 复选框选择,批量处理 二级列表,可展开收起 宽度可固定,可自适应 排序 ...
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
JS ——javascript文件 二、函数使用说明 1、功能介绍: 以表格形式显示数据,通过CSS文件控制样式; 提供全选、记录被选项ID、点击列名进行排序; 可控显示修改、删除链接; 附加打印功能; 2、使用示例: ...
//返回文本格式:“第1行x列,第2行x列,…,第N行x列” CComPtr<IDispatch> Object_GetTableCellObject(int i,int row, int j);//获取单元格元素接口(第一个参数指定第几个表格,第二个参数指定第几行,第三个参数...
复选框限制选择个数的方法 ... <label class=layui-form-label>xxx <input class=education lay-filter=hope type=checkbox name=param[hope_employ][] value=yy ...js form.on('checkbox(hope)',function(dat
Dynamic Selection List with multiple selection support (SELECT, RADIO and CHECKBOX) Auto-login and Auto-Redirect Multi-page add/edit/view pages as tabs with page captions Audit Trail Email ...
<table border="0" width="100%" cellpadding="0" cellspacing="1" > <input value="200012020202" id="test" type=checkbox> 200012020202 </td> 张 三 ...
6.4.4 jsSelect() 6.4.5 selectNode() 6.5 Ext.util.CSS 6.5.1 createStyleSheet() 6.5.2 getRule() 6.5.3 swapStyleSheet() 6.5.4 removeStyleSheet() 6.6 Ext.util.ClickRepeater 6.6.1 click...
('main.js')}" format="text"> <![CDATA[ var selectedTestCaseLink; function clearAllSelections() { if (selectedTestCaseLink != null) { selectedTestCaseLink.className = "testCaseLink"; } ...
交换表的行 TableID.moveRow(2,1) 替换CSS document.all.csss.href = "a.css"; 并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行 style="word-break:break-all" 自动刷新 ;URL=...
添加一下一行 FCKConfig.Plugins.Add( 'remoteupload', 'en,zh-cn' ) ; 3。调整您的工具栏设置,增加远程保存按钮,以下是我的 FCKConfig.ToolbarSets["Default"] = [ ['Source','DocProps','-','Save','NewPage...
操作 (tabledatas,index) in shopTableDatas"> class="selectLeft"> <el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox> ...
HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的...
<script type="text/javascript" src="/js/jquery.selectsort.js"> <script type="text/javascript" src="http://www.csdn.net/js/jquery.form.js"></script> <script language='JavaScript' type='text/javascript'...
action=add">添加</a></td> </tr><br> <tr bgcolor='#FCFCFC' height='20'><br> 选择</td><br> 产品类别</td><br> 字段类型</td><br> 字段名称</td><br> 字段意义</td><br> 操作</td><br> </tr>...
var sNewFieldString = '<s'+'cript language="JavaScript">' + '\n' + getObjByID.toString() + '\n' + showFieldType.toString() + '\n' + checkFieldType.toString() + '\n' + checkInput.toString() + '\n'...
组件布局 Layout字体库 Fonts样式 Style组件 Componentspui.ceng.js _ 弹层pui.table.js _ 表格pui.radio.js _ 单选pui.checkbox.js 复选pui.page.js _ 分页pui.switch.js _ 开关pui.select.js _ 下拉菜单pui.query....