现在做一个网站页面,其中有2个相同的功能,html和js代码代码基本相同,只是控件id不一样而已。现在问题来了,我现在第二个功能调用的js没错,但是第一个功能调用的确实第二个js,因为控件id不同所以报错。代码如下:
html代码:<DIV id=con>
<UL id=tags>
<LI class=selectTag><A onClick="selectTag('tagContent0',this)"
href="javascript:void(0)">教育</A> </LI>
<LI><A onClick="selectTag('tagContent1',this)"
href="javascript:void(0)">医疗</A> </LI>
<LI><A onClick="selectTag('tagContent2',this)"
href="javascript:void(0)">银行</A> </LI>
<LI><A onClick="selectTag('tagContent3',this)"
href="javascript:void(0)">超市、购物场所</A> </LI>
<LI><A onClick="selectTag('tagContent4',this)"
href="javascript:void(0)">新开房地产项目</A> </LI>
</UL>
<DIV id=tagContent>
<DIV class="tagContent selectTag" id=tagContent0>
<!--教育-->
<input name="txtName" type="text" id="txtName" /><input type="button" onclick="addRow(document.getElementById('txtName').value)" value="添加" >
<table id="myTable" border="0" cellpadding="0" cellspacing="1">
<tr><th>序号</th><th>名称</th><th>操作</th></tr>
</table>
</DIV>
<DIV class=tagContent id=tagContent1>这时是ASP标签的内容。</DIV>
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
<DIV class=tagContent id=tagContent3>自适应宽度的标签内容。</DIV>
<DIV class=tagContent id=tagContent4>自适应宽度的标签内容。</DIV>
<input type="submit" name="button" id="button" value="提交" />
</DIV>
</DIV>js代码:<style type="text/css">
*{
font-size:12px;
}
#myTable{
background:#D5D5D5;
color:#333333;
}
#myTable tr{
background:#F7F7F7;
}
#myTable tr th{
height:20px;
padding:5px;
}
#myTable tr td{
padding:5px;
}
</style>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
var num = 0;
function row(id){
//构造函数
this.id = $(id);
}
row.prototype = {
//插入行
insert:function(txt){
num = num - 1;
var newTr = this.id.insertRow(-1);
var td_1 = newTr.insertCell(0);
var td_2 = newTr.insertCell(1);
var td_3 = newTr.insertCell(2);
td_1.innerHTML = num;
td_2.innerHTML = txt+"<input type='hidden' name='hEdu' id='hEdu' value='"+txt+"' />";
td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";
document.getElementById("txtName").value="";
document.getElementById("txtName").focus();
},
//删除行
del:function(obj){
var i = obj.parentNode.parentNode.rowIndex;
this.id.deleteRow(i);
},
dValue:function(v){
num = num + 1;
var newTr = this.id.insertRow(-1);
var td_1 = newTr.insertCell(0);
var td_2 = newTr.insertCell(1);
var td_3 = newTr.insertCell(2);
td_1.innerHTML = num-1;
td_2.innerHTML = v+"<input type='hidden' name='hEdu' id='hEdu' value='"+v+"' />";
td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";
}
}
function addRow(txt){
var row2 = new row("myTable");
row2.insert(txt);
}
function delRow(obj){
var row1 = new row("myTable");
row1.del(obj);
}
function defaultValue(txt){
var row3 = new row("myTable");
txtStr=txt.split(",");
for(i=0;i<txtStr.length;i++)
{
row3.dValue(txtStr[i]);
}
}
var inputItem; // 输入框句柄
var activeItem; // 保存正在编辑的单元格
//转成文本
function changeToText(obj){
if( obj && inputItem ) {
// 如果存在正在编辑的单元格, 则取消编辑状态, 并将编辑的数据保存起来
var str = " ";
if(inputItem.value != "")
str = inputItem.value;
//obj.innerText = str
obj.innerHTML = str+"<input type='hidden' name='hEdu' id='hEdu' value='"+str+"' />";
}
}
//转成编辑
function changeToEdit(obj){
if( !inputItem ) {
inputItem = document.createElement('input');
inputItem.type = 'text';
inputItem.style.width = '100%';
}
// inputItem.style.display = '';
inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
obj.innerHTML = ''; // 清空单元格的数据
obj.appendChild(inputItem);
inputItem.focus();
activeItem = obj;
}
//双击时文本变成文本框
document.ondblclick = function(){
if(event.srcElement.tagName.toLowerCase() == "td"){
if(!inputItem){
inputItem = document.createElement("input");
inputItem.type = "text";
inputItem.style.width = "100%";
}
changeToText();
changeToEdit(event.srcElement);
}else{
event.returnValue = false;
return false;
}
}
//单击时文本框变成文本
document.onclick = function(){
if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem)
return;
else
changeToText(activeItem);
}
function selectTag(showContent,selfObj){
// 标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 标签内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
两个功能代码基本一样,改下id就是另一个。代码是在网上找的,本人对js比较迷糊,不知道该怎么办了,求高手帮忙。(本来想发张效果图的但是图片上传不了)
html代码:<DIV id=con>
<UL id=tags>
<LI class=selectTag><A onClick="selectTag('tagContent0',this)"
href="javascript:void(0)">教育</A> </LI>
<LI><A onClick="selectTag('tagContent1',this)"
href="javascript:void(0)">医疗</A> </LI>
<LI><A onClick="selectTag('tagContent2',this)"
href="javascript:void(0)">银行</A> </LI>
<LI><A onClick="selectTag('tagContent3',this)"
href="javascript:void(0)">超市、购物场所</A> </LI>
<LI><A onClick="selectTag('tagContent4',this)"
href="javascript:void(0)">新开房地产项目</A> </LI>
</UL>
<DIV id=tagContent>
<DIV class="tagContent selectTag" id=tagContent0>
<!--教育-->
<input name="txtName" type="text" id="txtName" /><input type="button" onclick="addRow(document.getElementById('txtName').value)" value="添加" >
<table id="myTable" border="0" cellpadding="0" cellspacing="1">
<tr><th>序号</th><th>名称</th><th>操作</th></tr>
</table>
</DIV>
<DIV class=tagContent id=tagContent1>这时是ASP标签的内容。</DIV>
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
<DIV class=tagContent id=tagContent3>自适应宽度的标签内容。</DIV>
<DIV class=tagContent id=tagContent4>自适应宽度的标签内容。</DIV>
<input type="submit" name="button" id="button" value="提交" />
</DIV>
</DIV>js代码:<style type="text/css">
*{
font-size:12px;
}
#myTable{
background:#D5D5D5;
color:#333333;
}
#myTable tr{
background:#F7F7F7;
}
#myTable tr th{
height:20px;
padding:5px;
}
#myTable tr td{
padding:5px;
}
</style>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
var num = 0;
function row(id){
//构造函数
this.id = $(id);
}
row.prototype = {
//插入行
insert:function(txt){
num = num - 1;
var newTr = this.id.insertRow(-1);
var td_1 = newTr.insertCell(0);
var td_2 = newTr.insertCell(1);
var td_3 = newTr.insertCell(2);
td_1.innerHTML = num;
td_2.innerHTML = txt+"<input type='hidden' name='hEdu' id='hEdu' value='"+txt+"' />";
td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";
document.getElementById("txtName").value="";
document.getElementById("txtName").focus();
},
//删除行
del:function(obj){
var i = obj.parentNode.parentNode.rowIndex;
this.id.deleteRow(i);
},
dValue:function(v){
num = num + 1;
var newTr = this.id.insertRow(-1);
var td_1 = newTr.insertCell(0);
var td_2 = newTr.insertCell(1);
var td_3 = newTr.insertCell(2);
td_1.innerHTML = num-1;
td_2.innerHTML = v+"<input type='hidden' name='hEdu' id='hEdu' value='"+v+"' />";
td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >";
}
}
function addRow(txt){
var row2 = new row("myTable");
row2.insert(txt);
}
function delRow(obj){
var row1 = new row("myTable");
row1.del(obj);
}
function defaultValue(txt){
var row3 = new row("myTable");
txtStr=txt.split(",");
for(i=0;i<txtStr.length;i++)
{
row3.dValue(txtStr[i]);
}
}
var inputItem; // 输入框句柄
var activeItem; // 保存正在编辑的单元格
//转成文本
function changeToText(obj){
if( obj && inputItem ) {
// 如果存在正在编辑的单元格, 则取消编辑状态, 并将编辑的数据保存起来
var str = " ";
if(inputItem.value != "")
str = inputItem.value;
//obj.innerText = str
obj.innerHTML = str+"<input type='hidden' name='hEdu' id='hEdu' value='"+str+"' />";
}
}
//转成编辑
function changeToEdit(obj){
if( !inputItem ) {
inputItem = document.createElement('input');
inputItem.type = 'text';
inputItem.style.width = '100%';
}
// inputItem.style.display = '';
inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上
obj.innerHTML = ''; // 清空单元格的数据
obj.appendChild(inputItem);
inputItem.focus();
activeItem = obj;
}
//双击时文本变成文本框
document.ondblclick = function(){
if(event.srcElement.tagName.toLowerCase() == "td"){
if(!inputItem){
inputItem = document.createElement("input");
inputItem.type = "text";
inputItem.style.width = "100%";
}
changeToText();
changeToEdit(event.srcElement);
}else{
event.returnValue = false;
return false;
}
}
//单击时文本框变成文本
document.onclick = function(){
if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem)
return;
else
changeToText(activeItem);
}
function selectTag(showContent,selfObj){
// 标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 标签内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
两个功能代码基本一样,改下id就是另一个。代码是在网上找的,本人对js比较迷糊,不知道该怎么办了,求高手帮忙。(本来想发张效果图的但是图片上传不了)
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货