如何用js改变id内容

HackGary 2009-08-18 01:14:00
第
<select name="week" id="s1" onchange="s_change()">
<%
for i=1 to 7
response.Write " <option value='"&i&"'>"&i
NEXT
%>
</select>
周
<table>
<tr>
<td>星期一 </td> <td>星期二 </td> <td>星期三 </td> <td>星期四 </td> <td>星期五 </td> <td>星期六 </td> <td>星期日 </td>
</tr>
<tr>
<% for a=1 to 7
response.Write" <td> <input type='checkbox' name='"&a&"' id='b"&a&"' onClick='t_onchange(this)'> </td>"
next
%>
</tr>
</table>

我想实现：当我按下拉列表时（如果选择了2），下面的checkbox id属性会变成前面带有2的id，比如原来的ID是b1，选了2之后，id会变成2_b1
...全文
296 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
PoolGolden 2009-08-18
  • 打赏
  • 举报
 回复
天啊，第一次看到需要改变ID来解决问题的？
这种做法即使做到了也会使得HTML混乱。
LZ不妨把实现要求贴出来，大家看有没别的办法。？
hookee 2009-08-18
  • 打赏
  • 举报
 回复 


<script>

function s_change(sel){

	var n = sel.options[sel.selectedIndex].value;

	var tbl = document.getElementById("tb");

	var ck  = tbl.getElementsByTagName("input");

	for(var i=0;i<ck.length;i++){

	   if(ck[i].type=="checkbox"){

	     id = ck[i].id;

	     if(id.indexOf("_")==-1){

	        if(n!=1) ck[i].setAttribute("id", n+"_"+id);	

	     }

	     else{

	     	var a = id.split("_");

	     	if(n==1) ck[i].setAttribute("id", a[1]);

	     	else ck[i].setAttribute("id", n+"_"+a[1]);

	     }	

	   }

	   alert(ck[i].id);

	}

}	

</script>



<select name="week" id="s1" onchange="s_change(this)"> 

  <% 

      for i=1 to 7 

      response.Write " <option value='"&i&"'>"&i 

      NEXT 

  %> 

</select> 

  周  

    <table id="tb"> 

        <tr> 

          <td>星期一 </td> <td>星期二 </td> <td>星期三 </td> <td>星期四 </td> <td>星期五 </td> <td>星期六 </td> <td>星期日 </td> 

</tr> 

        <tr> 

  <% for a=1 to 7 

  response.Write" <td> <input type='checkbox' name='"&a&"' id='b"&a&"' onClick='t_onchange(this)'> </td>" 

  next 

  %> 

        </tr> 

</table>
浴火_凤凰 2009-08-18
  • 打赏
  • 举报
 回复
对，试试JQuery的动态调用
浴火涅磐 2009-08-18
  • 打赏
  • 举报
 回复
你可以试试JQuery的动态调用
toury 2009-08-18
  • 打赏
  • 举报
 回复
我没时间也没义务帮你一行行敲代码，呵呵
看看你的原帖，我刚回复了，依旧是思路。
别总低头拉车，先抬头看路：）
HackGary 2009-08-18
  • 打赏
  • 举报
 回复
如果不是添加，而是替换呢！比如初始化为1_b(1-7),如果选了2，checkbox全部会变成2_b(1-7).
HackGary 2009-08-18
  • 打赏
  • 举报
 回复
你可以按照这个代码，建一个数据库！要成功实现我要的功能！
HackGary 2009-08-18
  • 打赏
  • 举报
 回复
不是！我直接把代码给你，你试试就知道了！
<script>
var object = new Object();

function t_onchange(obj){
var s = document.getElementById("s1").value;
var k = document.getElementById("s2").value;
if(typeof(object[s])=='undefined'){
object[s] = {};
}
if(typeof(object[s][k])=='undefined') object[s][k]=new Object();
object[s][k][obj.id]=obj.value;
}

function s_change(){
for(var i=1;i<57;i++){
document.getElementById(i).checked=false;
}
var s = document.getElementById("s1").value;
var k = document.getElementById("s2").value;
if(typeof(object[s])!='undefined'){
if(typeof(object[s][k])!='undefined'){
for(var i in object[s][k]){
document.getElementById(i).checked=object[s][k][i];
}
}
}
}

</script>
<table>
<tr>
<td>
第<select name="week" id="s1" onChange="s_change()">
<%
for i=1 to 18
response.Write "<option value='"&i&"'>"&i
NEXT
%>
</select>周
</td>

<td>
第<select name="zu" id="s2" onChange="s_change(this)">
<%
for i=1 to 10
response.Write "<option value='"&i&"'>"&i
NEXT
%>
</select>台
</td>
</tr>
<tr><td></td></tr>
<tr>
<td colspan="3">
<table border="1" align="center" width="100%" bordercolor="#d5fcfc" id="result">
<tr><td width="60px" ></td><td width="50px" >星期一</td><td width="50px">星期二</td><td width="50px" >星期三</td><td width="50px" >星期四</td><td width="50px" >星期五</td><td width="50px" >星期六</td><td width="50px">星期日</td></tr>
<tr><td width="60px">第1、2节</td>
<% for a=1 to 7
response.Write"<td width='50px'><input type='checkbox' name='"&a&"' id='1_b"&a&"' onClick='t_onchange(this)'></td>"
next
%>
</tr>
<tr><td width="60px">第3、4节</td>
<% for b=8 to 14
response.Write"<td width='50px'><input type='checkbox' name='"&b&"' id='1_b"&b&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第5、6节</td>
<% for c=15 to 21
response.Write"<td width='50px'><input type='checkbox' name='"&c&"' id='1_b"&c&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第7、8节</td>
<% for d=22 to 28
response.Write"<td width='50px'><input type='checkbox' name='"&d&"' id='1_b"&d&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第9、10节</td>
<% for e=29 to 35
response.Write"<td width='50px'><input type='checkbox' name='"&e&"'' id='1_b"&e&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第11、12节</td>
<% for f=36 to 42
response.Write"<td width='50px'><input type='checkbox' name='"&f&"' id='1_b"&f&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第13、14节</td>
<% for g=43 to 49
response.Write"<td width='50px'><input type='checkbox' name='"&g&"' id='1_b"&g&"' onClick='t_onchange(this)'></td>"
next
%></tr>
<tr><td width="60px">第15、21节</td>
<% for h=50 to 56
response.Write"<td width='50px'><input type='checkbox' name='"&h&"' id='1_b"&h&"' onClick='t_onchange(this)'></td>"
next
%>
</table>
</td>
</tr>
</table>

运行下上面的代码！要做到别人选过的（成功加入数据库），就disabled掉！要给出如何写库，数据表可以自己想！
toury 2009-08-18
  • 打赏
  • 举报
 回复
原帖里我已经给你一个解决思路；稍微修改一下，把表格中间的那些checkbox的NAME统一命名就可以直接写库了。

你非要用JS数组记录checkbox的选择情况，我就不明白为什么了？是抱残守缺？还是舍不得你写的那些代码？还是别人要求你这么做？呵呵。你现在的思路实现你的需求太麻烦了.................
HackGary 2009-08-18
  • 打赏
  • 举报
 回复
hookee,我的初始化为1_b(1-7)，不是b(1-7)。你能再修改下么？
惜分飞 2009-08-18
  • 打赏
  • 举报
 回复
var str=$("s1").value+"_b1";
$(":checkbox").attr("id","str");


这样你尝试下行不？
a11377815 2009-08-18
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
function changeSel(obj) {
var tag = document.getElementsByTagName("input")
var len = tag.length;
for (var i = 0; i < len; i++) {
if (tag[i].type == "checkbox" && tag[i].id == "b" + obj.value) {
tag[i].id = obj.value + "_" + tag[i].id;
}
}
alert(document.getElementById("result").innerHTML);
}
</script>

</head>
<body>
<table>
<tr>
<td>
<select onchange="changeSel(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>
</table>
<table id="result">
<tr>
<td>
星期一
</td>
<td>
星期二
</td>
<td>
星期三
</td>
<td>
星期四
</td>
<td>
星期五
</td>
<td>
星期六
</td>
<td>
星期日
</td>
</tr>
<tr>

<script type="text/javascript">
for (var i = 1; i <= 7; i++) {
document.write("<td> <input type='checkbox' name='_" + i + "' id='b" + i + "' onClick='t_onchange(this)'> </td>");
}
</script>

</tr>
</table>
</body>
</html>
a11377815 2009-08-18
  • 打赏
  • 举报
 回复
试下告诉你吧
HackGary 2009-08-18
  • 打赏
  • 举报
 回复
如果我规定要这样呢？能有办法不？
a11377815 2009-08-18
  • 打赏
  • 举报
 回复
重新组织下html咯，或者jquery.attr这个？
JavaScript 能够改变 HTML 内容（20行代码）
txt文件中是一段JS代码，修改文件后缀名为html即可运行。 内部代码有注释，代码的功能是：当点击按钮时，将id为"demo"的段落元素的内容修改为"Hello JavaScript!"。 说明：本资源展示了如何使用 JavaScript 修改 HTML 内容的20行代码示例。JavaScript 是一种强大的脚本语言，它能够在网页中动态地改变和控制 HTML 元素的内容和样式。通过该资源，您将学习基本的 JavaScript 和 HTML 相互作用的知识，以及如何使用几行简单的代码实现动态修改网页内容的效果。
JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法。分享给大家供大家参考。具体如下： JavaScript动态改变表格单元格的内容，下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> [removed] function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0][removed]="NEW CONTENT"; } [removed] </head> <body> <table id="myTabl
JavaScript面试攻略
课程目标1.了解初级JS到中级JS，必须学习的核心内容2. 掌握javascript面试中，常见的面试题在面试前端工程师岗位时，javascript是面试的核心部分，具有广度、深度并存的特点。《javascript面试攻略》总结了初级前端js的面试经验以及常见的面试题，大幅降低了面试的准备成本。此外，本次课程也可以作为javascript进阶的学习指导。课程特点1. 3小时搞定面试常问的问题2. 课程内容精炼，只讲干货3. 定制性讲解4. 学习门槛低5. 采用基础内容+动态内容方式
Javascript获取标签ID改变style属性的代码
下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了
javascript使用Dom改变超链接前面文本框的值
利用dom的树可以不用id就可以修改相关内容，如修改每个超链接前面的文本框的值。 + + + [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这里主要使用previousSibling属性访问前一个节点，从而达到改变前一个文本框值的效果.
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章