js無(wú)刷新操作table的行和列
更新時(shí)間:2014年03月27日 11:14:52 作者:
這篇文章主要介紹了js操作table的行和列,無(wú)刷新實(shí)現(xiàn),需要的朋友可以參考下
代碼僅供參考 如果強(qiáng)行復(fù)制請(qǐng)修改頁(yè)面id
//查詢(xún)數(shù)據(jù)庫(kù)符合條件的數(shù)據(jù)
function SelectAlterNativeVenues(field)
{
var xmlhttp;
var pid = document.getElementById("nameandaddress").value;
var url = "${RetrieveURL}?accessorType=${AccessorType}";
url = url+"&method=RetrieveSelectResult&NameAndAddress="+escape(pid);
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
if (xmlhttp != null)
{
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("If-Modified-Since", "0");
xmlhttp.send(null);
xmlhttp.onreadystatechange = function processRefreshUsers() //注冊(cè)方法
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
//responseXML獲取執(zhí)行RetrieveCitiesByProvinceId方法的返回值
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues");
var nname = document.getElementById("table1");
var pchildren = nname.childNodes;//清空表中的行和列
for(var a=0; a<pchildren.length; a++)
{
nname.removeChild(pchildren[a]);
}
//添加查詢(xún)行
var aaRow=nname.insertRow(0);
var aaCell=aaRow.insertCell(0);
aaCell.innerHTML="<input type='text' name='nameandaddress' id='nameandaddress'/>";
aaRow.insertCell(1).innerHTML="<span style=\"cursor:pointer;border:1px\" name=\"submit\" onclick=\"SelectAlterNativeVenues('"+field+"');\" >查詢(xún)</span>";
//添加標(biāo)題行
var aRow=nname.insertRow(1);
aRow.insertCell(0).innerHTML="";
aRow.insertCell(1).innerHTML="名稱(chēng)";
aRow.insertCell(2).innerHTML="地址";
aRow.insertCell(3).innerHTML="電話";
//循環(huán)添加數(shù)據(jù)行
for (i = 0; i < datas.length; i++)
{
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue;
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue;
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue;
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue;
var aNewRow=nname.insertRow(i+2);
aNewRow.insertCell(0).innerHTML="<input type=\"checkbox\" id=\"AlterNativeVenues_"+Id+"\" name=\"AlterNativeVenues_"+Id+"\" onclick=\"AddRowSelectAfter('AlterNativeVenues_"+Id+"','"+field+"')\" />";
aNewRow.insertCell(1).innerHTML=Name;
aNewRow.insertCell(2).innerHTML=Address;
aNewRow.insertCell(3).innerHTML=Phone;
}
}
}
}
}
}
//添加已選中的數(shù)據(jù)
function AddRowSelectAfter(id,field)
{
//把隱藏域里面的所有id劃分開(kāi) 然后把對(duì)應(yīng)的checked綁定
var state=false; //判斷下面列表是否存在
var _hiddenId=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
for(j=0;j<_hiddenId.length;j++)
{
if(_hiddenId[j]==id.split('_')[1])
{
state=true;
}
}
if(state==false)
{
//只要點(diǎn)擊checkbox就出發(fā)一次更改隱藏域的值
//非選中狀態(tài)需要把id從隱藏控件里面移除
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
//定義一個(gè)字段重新獲取id
var newids="";
for(var arr=0;arr<arrs.length;arr++)
{
if(arrs[arr]!=id.split('_')[1])
newids+=arrs[arr]+",";
}
//重新給隱藏控件賦值
//最后一個(gè)字符可能是,
var fh=newids.substr(newids.length-1,newids.length);
if(fh==",")
document.getElementById(field).value=newids.substr(0,newids.length-1);
else
document.getElementById(field).value=newids;
if(document.getElementById(id).checked==false)
{
//選中狀態(tài)點(diǎn)擊改為非點(diǎn)中狀態(tài) 移除已選的場(chǎng)館
document.getElementById(id).checked=false;
//給tr設(shè)置id用來(lái)刪除tr
document.getElementById("table2").deleteRow(document.getElementById("NewRow_"+id.split('_')[1]).rowIndex);
}
else
{
document.getElementById(id).checked=true;
var input =document.getElementById(field);
var xmlhttp;
var url = "${RetrieveURL}?accessorType=${AccessorType}";
url = url+"&method=SelectResult&id="+id;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
if (xmlhttp != null)
{
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("If-Modified-Since", "0");
xmlhttp.send(null);
xmlhttp.onreadystatechange = function processRefreshUsers() //注冊(cè)方法
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
//responseXML獲取執(zhí)行RetrieveCitiesByProvinceId方法的返回值
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues");
var nname = document.getElementById("table2");
nname.style.width="560px";
if(nname.rows.length==0&&datas.length>0)
{
//第一行
var firstRow=nname.insertRow(0);
firstRow.id="NewRow_0";
firstRow.insertCell(0).innerHTML="名稱(chēng)";
firstRow.insertCell(1).innerHTML="地址";
firstRow.insertCell(2).innerHTML="電話";
firstRow.insertCell(3).innerHTML="操作";
}
for (i = 0; i < datas.length; i++)
{
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue;
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue;
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue;
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue;
var aNewRow=nname.insertRow(nname.rows.length);
aNewRow.id="NewRow_"+Id;
var oneCell=aNewRow.insertCell(0);
oneCell.innerHTML=Name;
oneCell.width=140;
var twoCell=aNewRow.insertCell(1);
twoCell.innerHTML=Address;
twoCell.width=280;
var threeCell=aNewRow.insertCell(2);
threeCell.innerHTML=Phone;
threeCell.width=100;
var fourCell=aNewRow.insertCell(3);
fourCell.innerHTML="<span id=\"span_"+Id+"\" onclick=\"DeleteRow('"+Id+"',this,'"+field+"')\">刪除</span>";
fourCell.width=40;
if(input.value!="")
input.value+=",";
input.value+=Id;
}
}
}
}
}
}
}
}
function DeleteRow(id,obj,field)
{
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode)
var nname = document.getElementById("table2");
if(nname.rows.length==1)
{
nname.deleteRow(0);
}
//已經(jīng)存儲(chǔ)到數(shù)據(jù)庫(kù)的 查詢(xún)之后上面列表沒(méi)有的情況
if(document.getElementById("AlterNativeVenues_"+id)!=null||document.getElementById("AlterNativeVenues_"+id)!=undefined)
{
if(document.getElementById("AlterNativeVenues_"+id).checked==true)
{
document.getElementById("AlterNativeVenues_"+id).checked=false;
}
}
//非選中狀態(tài)需要把id從隱藏控件里面移除
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
//定義一個(gè)字段重新獲取id
var newids="";
for(var arr=0;arr<arrs.length;arr++)
{
if(arrs[arr]!=id)
newids+=arrs[arr]+",";
}
//重新給隱藏控件賦值
//重新給隱藏控件賦值
//最后一個(gè)字符可能是,
var fh=newids.substr(newids.length-1,newids.length);
if(fh==",")
{
document.getElementById(field).value=newids.substr(0,newids.length-1);
}
else
document.getElementById(field).value=newids;
}
復(fù)制代碼 代碼如下:
//查詢(xún)數(shù)據(jù)庫(kù)符合條件的數(shù)據(jù)
function SelectAlterNativeVenues(field)
{
var xmlhttp;
var pid = document.getElementById("nameandaddress").value;
var url = "${RetrieveURL}?accessorType=${AccessorType}";
url = url+"&method=RetrieveSelectResult&NameAndAddress="+escape(pid);
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
if (xmlhttp != null)
{
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("If-Modified-Since", "0");
xmlhttp.send(null);
xmlhttp.onreadystatechange = function processRefreshUsers() //注冊(cè)方法
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
//responseXML獲取執(zhí)行RetrieveCitiesByProvinceId方法的返回值
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues");
var nname = document.getElementById("table1");
var pchildren = nname.childNodes;//清空表中的行和列
for(var a=0; a<pchildren.length; a++)
{
nname.removeChild(pchildren[a]);
}
//添加查詢(xún)行
var aaRow=nname.insertRow(0);
var aaCell=aaRow.insertCell(0);
aaCell.innerHTML="<input type='text' name='nameandaddress' id='nameandaddress'/>";
aaRow.insertCell(1).innerHTML="<span style=\"cursor:pointer;border:1px\" name=\"submit\" onclick=\"SelectAlterNativeVenues('"+field+"');\" >查詢(xún)</span>";
//添加標(biāo)題行
var aRow=nname.insertRow(1);
aRow.insertCell(0).innerHTML="";
aRow.insertCell(1).innerHTML="名稱(chēng)";
aRow.insertCell(2).innerHTML="地址";
aRow.insertCell(3).innerHTML="電話";
//循環(huán)添加數(shù)據(jù)行
for (i = 0; i < datas.length; i++)
{
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue;
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue;
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue;
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue;
var aNewRow=nname.insertRow(i+2);
aNewRow.insertCell(0).innerHTML="<input type=\"checkbox\" id=\"AlterNativeVenues_"+Id+"\" name=\"AlterNativeVenues_"+Id+"\" onclick=\"AddRowSelectAfter('AlterNativeVenues_"+Id+"','"+field+"')\" />";
aNewRow.insertCell(1).innerHTML=Name;
aNewRow.insertCell(2).innerHTML=Address;
aNewRow.insertCell(3).innerHTML=Phone;
}
}
}
}
}
}
//添加已選中的數(shù)據(jù)
function AddRowSelectAfter(id,field)
{
//把隱藏域里面的所有id劃分開(kāi) 然后把對(duì)應(yīng)的checked綁定
var state=false; //判斷下面列表是否存在
var _hiddenId=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
for(j=0;j<_hiddenId.length;j++)
{
if(_hiddenId[j]==id.split('_')[1])
{
state=true;
}
}
if(state==false)
{
//只要點(diǎn)擊checkbox就出發(fā)一次更改隱藏域的值
//非選中狀態(tài)需要把id從隱藏控件里面移除
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
//定義一個(gè)字段重新獲取id
var newids="";
for(var arr=0;arr<arrs.length;arr++)
{
if(arrs[arr]!=id.split('_')[1])
newids+=arrs[arr]+",";
}
//重新給隱藏控件賦值
//最后一個(gè)字符可能是,
var fh=newids.substr(newids.length-1,newids.length);
if(fh==",")
document.getElementById(field).value=newids.substr(0,newids.length-1);
else
document.getElementById(field).value=newids;
if(document.getElementById(id).checked==false)
{
//選中狀態(tài)點(diǎn)擊改為非點(diǎn)中狀態(tài) 移除已選的場(chǎng)館
document.getElementById(id).checked=false;
//給tr設(shè)置id用來(lái)刪除tr
document.getElementById("table2").deleteRow(document.getElementById("NewRow_"+id.split('_')[1]).rowIndex);
}
else
{
document.getElementById(id).checked=true;
var input =document.getElementById(field);
var xmlhttp;
var url = "${RetrieveURL}?accessorType=${AccessorType}";
url = url+"&method=SelectResult&id="+id;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
if (xmlhttp != null)
{
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("If-Modified-Since", "0");
xmlhttp.send(null);
xmlhttp.onreadystatechange = function processRefreshUsers() //注冊(cè)方法
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
//responseXML獲取執(zhí)行RetrieveCitiesByProvinceId方法的返回值
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues");
var nname = document.getElementById("table2");
nname.style.width="560px";
if(nname.rows.length==0&&datas.length>0)
{
//第一行
var firstRow=nname.insertRow(0);
firstRow.id="NewRow_0";
firstRow.insertCell(0).innerHTML="名稱(chēng)";
firstRow.insertCell(1).innerHTML="地址";
firstRow.insertCell(2).innerHTML="電話";
firstRow.insertCell(3).innerHTML="操作";
}
for (i = 0; i < datas.length; i++)
{
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue;
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue;
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue;
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue;
var aNewRow=nname.insertRow(nname.rows.length);
aNewRow.id="NewRow_"+Id;
var oneCell=aNewRow.insertCell(0);
oneCell.innerHTML=Name;
oneCell.width=140;
var twoCell=aNewRow.insertCell(1);
twoCell.innerHTML=Address;
twoCell.width=280;
var threeCell=aNewRow.insertCell(2);
threeCell.innerHTML=Phone;
threeCell.width=100;
var fourCell=aNewRow.insertCell(3);
fourCell.innerHTML="<span id=\"span_"+Id+"\" onclick=\"DeleteRow('"+Id+"',this,'"+field+"')\">刪除</span>";
fourCell.width=40;
if(input.value!="")
input.value+=",";
input.value+=Id;
}
}
}
}
}
}
}
}
function DeleteRow(id,obj,field)
{
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode)
var nname = document.getElementById("table2");
if(nname.rows.length==1)
{
nname.deleteRow(0);
}
//已經(jīng)存儲(chǔ)到數(shù)據(jù)庫(kù)的 查詢(xún)之后上面列表沒(méi)有的情況
if(document.getElementById("AlterNativeVenues_"+id)!=null||document.getElementById("AlterNativeVenues_"+id)!=undefined)
{
if(document.getElementById("AlterNativeVenues_"+id).checked==true)
{
document.getElementById("AlterNativeVenues_"+id).checked=false;
}
}
//非選中狀態(tài)需要把id從隱藏控件里面移除
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(',');
//定義一個(gè)字段重新獲取id
var newids="";
for(var arr=0;arr<arrs.length;arr++)
{
if(arrs[arr]!=id)
newids+=arrs[arr]+",";
}
//重新給隱藏控件賦值
//重新給隱藏控件賦值
//最后一個(gè)字符可能是,
var fh=newids.substr(newids.length-1,newids.length);
if(fh==",")
{
document.getElementById(field).value=newids.substr(0,newids.length-1);
}
else
document.getElementById(field).value=newids;
}
您可能感興趣的文章:
- js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
- Js實(shí)現(xiàn)動(dòng)態(tài)添加刪除Table行示例
- C#中把Datatable轉(zhuǎn)換為Json的5個(gè)代碼實(shí)例
- jquery easyui 結(jié)合jsp簡(jiǎn)單展現(xiàn)table數(shù)據(jù)示例
- 利用js制作html table分頁(yè)示例(js實(shí)現(xiàn)分頁(yè))
- JavaScript獲取table中某一列的值的方法
- JQuery實(shí)現(xiàn)table行折疊效果以JSON做數(shù)據(jù)源
- 通過(guò)Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json
- JS使用for循環(huán)遍歷Table的所有單元格內(nèi)容
- C#中的DataSet、string、DataTable、對(duì)象轉(zhuǎn)換成Json的實(shí)現(xiàn)代碼
- JS動(dòng)態(tài)添加Table的TR,TD實(shí)現(xiàn)方法
- JS獲取Table中td值的方法
- 分享幾種比較簡(jiǎn)單實(shí)用的JavaScript tabel切換
相關(guān)文章
小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)
在項(xiàng)目中遇到一個(gè)需求,根據(jù)不同的賬號(hào),生成不同的tabBar,下面這篇文章主要給大家介紹了關(guān)于小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)的相關(guān)資料,需要的朋友可以參考下2022-12-12Bootstrap警告(Alerts)的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap警告(Alerts)的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Lerna入門(mén)之管理TypeScript monorepo教程
這篇文章主要為大家介紹了Lerna入門(mén)之管理TypeScript monorepo教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11前端url拼接參數(shù)格式&?用&和??=拼接方法實(shí)例
在一些情況下需要直接往url上拼接請(qǐng)求參數(shù),下面這篇文章主要給大家介紹了關(guān)于前端url拼接參數(shù)格式&?用&和??=拼接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02javascript中的有名函數(shù)和無(wú)名函數(shù)
javascript中的有名函數(shù)和無(wú)名函數(shù)...2007-10-10