如何避免table中行的文本框的id不重复

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*,Bean.Bean"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--
.STYLE1 {
font-size: 36px;
font-style: italic;
}
body {
background-color: #0066FF;
}
-->
</style></head>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js">

</script>
<script type="text/javascript">
var tip;
var currentNode;function createXMLHttpRequest(){
if(window.XMLHttpRequest){
      XMLHttpreq = new XMLHttpRequest();//创建IE浏览器之外的对象XMLHttpRequest
 }
 if(window.ActiveXObject){//创建IE浏览器的对象ActiveXObject
       try{
        XMLHttpreq = new ActiveXObject("Msxml2.XMLHTTP");
           }catch(e){
               try{
                XMLHttpreq = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch(e){}
               }
 }

  }
function handleResponse(){
if(XMLHttpreq.readyState==4){
if(XMLHttpreq.status==200){
var res=XMLHttpreq.responseXML;
tip=document.getElementById("tip");
var text=res.getElementsByTagName("content")[0].firstChild.nodeValue;
tip.innerHTML=text.slice(0,text.indexOf("电影级别："))+"<br>"+text.slice(text.indexOf("电影级别："),text.indexOf("电影分级："))+"<br>"+text.slice(text.indexOf("电影分级："),text.indexOf("电影价钱："))+"<br>"+text.slice(text.indexOf("电影价钱："),text.indexOf("放映日期："))+"<br>"+text.slice(text.indexOf("放映日期："),text.length)+"<br>";
tip.style.border="black 1px dashed";
tip.style.backgroundColor="#f5f5f1";
document.getElementById("tip").style.visibility="visible";
}

}

}function sendRequest(url){
createXMLHttpRequest();
XMLHttpreq.open("GET",url,true);
XMLHttpreq.onreadystatechange=handleResponse;
XMLHttpreq.send(null);
}function show(node){
currentNode=node;
var key=currentNode.innerHTML;
sendRequest("ToolTip?key="+escape(key));
tip=document.getElementById("tip");
tip.style.top=event.y;
tip.style.left=event.x;
}function hidden(){
document.getElementById("tip").style.visibility="hidden";
}function updateTitle(node){

var id=document.getElementById("id").value;//这2个地方的id title 怎么避免重复
var title=document.getElementById("title").value;//
sendRequest("UpdateTitle?title="+title+"&"+"id="+id);
}
</script>
<script type="text/javascript">

function del(id) {


var flag = window.confirm("Delete?");

if (flag) {

location.href = "delete.do?id="{li.id};
}
}
</script>
<body>
<div align="center" class="STYLE1">MOVIES</div>
<table width="770" height="237" border="1">
  <tr>
    <th scope="col">detail</th>
    <th scope="col">update</th>
    <th scope="col">delete</th>
    <th scope="col">title</th>
    <th scope="col">releaseDate</th>
    <th scope="col">genre</th>
    <th scope="col">price</th>
    <th scope="col">rating</th>
  </tr>
<%request.setCharacterEncoding("UTF-8");
List<Bean> list=(List<Bean>)request.getAttribute("list");
for(Bean bean:list){%>
  <tr>
    <td><a href="/OldMovies/Detail?id=<%=bean.getId() %>">detail</a></td>
    <td><a href="/OldMovies/Update1?id=<%=bean.getId() %>">update</a></td>
    <td><a href="/OldMovies/Delete?id=<%=bean.getId() %>">delete</a> </td>
    <td bgcolor="#ffffff"><input type=text id=title name=title value="<%=bean.getTitle() %>"   onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0" onblur="updateTitle()"/> 
    </td>
    <td><input type=text id=date name=date value="<%=bean.getRelease_date() %>" onClick="WdatePicker()"/></td>
    <td><input type=text id=Gename name=Gename value="<%=bean.getGename() %>"/></td>
    <td><input type=text id=price name=price value="<%=bean.getPrice() %>"/></td>
    <td><input type=text id=Raname name=Raname value="<%=bean.getRaname() %>"/></td>
    <td onmouseover="show(this)" onmouseout="hidden()"><%=bean.getId() %></td>
    <td><input type=hidden id=id name=id value="<%=bean.getId() %>"/></td>
  </tr>
 <%} %>
</table><div style="position:absolute;" id=tip ></div>
<p><a href="/OldMovies/add.jsp">add</a></p>
</body>
</html>

解决方案 »

  1.   

    使用程序语言，如java ,struts2标签，在td中定义id
    比如
    <tr id="<%=当前循环变量的id%>Tr">
    <td id="<%=当前循环变量的id%>Td1">
    <td id="<%=当前循环变量的id%>Td2">这样，可以保证相应的id，绝对不重复，在处理事件时，记得把相对应的<%=当前循环变量的id%>传递到js方法中。
      

  2.   

    id=title<%=i%>这一堆ajax，眼晕没细看。
      

  3.   

    <%
      int j=1; 
    %>
    <td class=BACKGROUND_center id="<%=j%>"></td>
    <%
      j++; 
    %>
      

  4.   

    加个for(int i=0;i<XX;i++)循环，ID用"xx"+i代替
      

  5.   

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="java.util.*,Bean.Bean,Bean.Rating"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    <!--
    .STYLE1 {
    font-size: 36px;
    font-style: italic;
    }
    body {
    background-color: #FFFFFF;
    }
    -->
    </style></head><script type="text/javascript" src="My97DatePicker/WdatePicker.js">

    </script>
    <script type="text/javascript">
    var tip;
    var currentNode;function createXMLHttpRequest(){
    if(window.XMLHttpRequest){
          XMLHttpreq = new XMLHttpRequest();//创建IE浏览器之外的对象XMLHttpRequest
     }
     if(window.ActiveXObject){//创建IE浏览器的对象ActiveXObject
           try{
            XMLHttpreq = new ActiveXObject("Msxml2.XMLHTTP");
               }catch(e){
                   try{
                    XMLHttpreq = new ActiveXObject("Microsoft.XMLHTTP");
                      }catch(e){}
                   }
     }

      }
    function handleResponse(){
    if(XMLHttpreq.readyState==4){
    if(XMLHttpreq.status==200){
    var res=XMLHttpreq.responseXML;
    tip=document.getElementById("tip");
    var text=res.getElementsByTagName("content")[0].firstChild.nodeValue;
    tip.innerHTML=text.slice(0,text.indexOf("电影级别："))+"<br>"+text.slice(text.indexOf("电影级别："),text.indexOf("电影分级："))+"<br>"+text.slice(text.indexOf("电影分级："),text.indexOf("电影价钱："))+"<br>"+text.slice(text.indexOf("电影价钱："),text.indexOf("放映日期："))+"<br>"+text.slice(text.indexOf("放映日期："),text.length)+"<br>";
    tip.style.border="black 1px dashed";
    tip.style.backgroundColor="#f5f5f1";
    document.getElementById("tip").style.visibility="visible";
    var Ra=XMLHttpreq.responseXML;
    var Rating=ra.getElementsByTagName("Rating")[0].firstChild.nodeValue;

    }

    }

    }function sendRequest(url){
    createXMLHttpRequest();
    XMLHttpreq.open("GET",url,true);
    XMLHttpreq.onreadystatechange=handleResponse;
    XMLHttpreq.send(null);
    }function show(node){
    currentNode=node;
    var key=currentNode.innerHTML;
    sendRequest("ToolTip?key="+escape(key));
    tip=document.getElementById("tip");
    tip.style.top=event.y;
    tip.style.left=event.x;
    }function hidden(){
    document.getElementById("tip").style.visibility="hidden";
    }function updateTitle(value,id){ sendRequest("UpdateTitle?title="+value+"&"+"id="+id);

    }function fun(temp){
    alert(temp);
    }function updateDate(date,id){
    sendRequest("UpdateDate?date="+date+"&"+"id="+id);

    }
    function selectGenre(GenameNo,genreNo){

     var Gename = document.getElementById(GenameNo);
     var Genre = document.getElementById(genreNo);
     
      Gename.style.display = 'none';
      Genre.style.display='';
      document.getElementById(genreNo).focus();

    }
    function overGenre(GenameNo,genreNo,genre,id){

     var Gename = document.getElementById(GenameNo);
     var Genre = document.getElementById(genreNo);
     Gename.style.display ='';
     Genre.style.display='none';
     sendRequest("UpdateGenre?genre="+genre+"&"+"id="+id);
     
    }
    function displayGenre(Genre,GenameNo){

    var display;
    if(Genre==1){
    display="an";
    }
    else if(Genre==2){
    display="action";
    }
    else if(Genre==3){
    display="sci-fi";
    }
    else if(Genre==4){
    display="drama";
    }
    else if(Genre==5){
    display="thriller";
    }
    else if(Genre==8){
    display="comedy";
    }
    else if(Genre==9){
    display="romantic comedy";
    }

    document.getElementById(GenameNo).value=display;
    }
    function updatePrice(value,id){ sendRequest("UpdatePrice?price="+value+"&"+"id="+id);

    }
    function selectRating(RanameNo,ratingNo){

     var Raname = document.getElementById(RanameNo);
     var Rating = document.getElementById(ratingNo);
     
      Raname.style.display = 'none';
      Rating.style.display='';
      document.getElementById(ratingNo).focus();

    }
    function overRating(RanameNo,ratingNo,rating,id){

     var Raname = document.getElementById(RanameNo);
     var Rating = document.getElementById(ratingNo);
     Raname.style.display ='';
     Rating.style.display='none';
     sendRequest("UpdateRating?rating="+rating+"&"+"id="+id);
     
    }
    function displayRating(rating,ratingNo){

    document.getElementById(ratingNo).value=rating;
    }
    </script>
    <script type="text/javascript">

    function del(id) {


    var flag = window.confirm("Delete?");

    if (flag) {

    location.href = "delete.do?id="+${li.id};
    }
    }
    </script>
    <body>
    <div align="center" class="STYLE1">MOVIES</div>
    <table width="770" height="237" border="1" id="table">
      <tr>
        <th scope="col">detail</th>
        <th scope="col">update</th>
        <th scope="col">delete</th>
        <th scope="col">title</th>
        <th scope="col">releaseDate</th>
        <th scope="col">genre</th>
        <th scope="col">price</th>
        <th scope="col">rating</th>
      </tr>
    <%request.setCharacterEncoding("UTF-8");
    List<Bean> list=(List<Bean>)request.getAttribute("list");
    for(int i=0;i<list.size();i++){
    %>
      <tr>
        <td><a href="/OldMovies/Detail?id=<%=list.get(i).getId() %>">detail</a></td>
        <td><a href="/OldMovies/Update1?id=<%=list.get(i).getId() %>">update</a></td>
        <td><a href="/OldMovies/Delete?id=<%=list.get(i).getId() %>">delete</a> </td>
        <td bgcolor="#ffffff"><input type=text id="<%=i+'a'%>" name=title value="<%=list.get(i).getTitle() %>"   onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0" onblur="updateTitle(this.value,'<%=list.get(i).getId()%>')"/> 
        </td>
        <td><input type=text id=date name=date value="<%=list.get(i).getRelease_date() %>" onClick="WdatePicker()" onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0" onblur="updateDate(this.value,'<%=list.get(i).getId()%>')"/></td>
        <td><input type=text id="<%=i+'g'%>"  name=Gename value="<%=list.get(i).getGename() %>" onClick="selectGenre(<%=i+'g'%>,<%=i+'G'%>)" onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0"/>
        <select name="genre" id="<%=i+'G'%>" style="display:none;" onchange="displayGenre(this.value,'<%=i+'g'%>')" onblur="overGenre(<%=i+'g'%>,<%=i+'G'%>,this.value,'<%=list.get(i).getId()%>')">
    <option value="1">an</option>
    <option value="2">action</option>
    <option value="3">sci-fi</option>
    <option value="4">drama</option>
    <option value="5">thriller</option>
    <option value="8">comedy</option>
    <option value="9">romantic comedy</option>
    </select>
    </td>
        <td><input type=text id=price name=price value="<%=list.get(i).getPrice() %>" onblur="updatePrice(this.value,'<%=list.get(i).getId()%>')" onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0"/></td>
        <td><input type=text id="<%=i+'w'%>" name=Raname value="<%=list.get(i).getRaname() %>" onclick="selectRating(<%=i+'w'%>,<%=i+'A'%>)"/ onmouseover="this.style.backgroundColor='#0066FF'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="border:0">
        <%List<Rating> list1=(List<Rating>)request.getAttribute("list1");%>
        <select name="rating" id="<%=i+'A'%>" style="display:none;" onblur="overRating(<%=i+'w'%>,<%=i+'A'%>,this.value,'<%=list.get(i).getId()%>')" onchange="displayRating(this[this.selectedIndex].text,'<%=i+'w'%>')"><%for(int k=0;k<list1.size();k++){
    %>
    <option value=<%=list1.get(k).getRating()%>><%=list1.get(k).getRaname()%></option>
    <%} %>
    </select></td>
        <td onmouseover="show(this)" onmouseout="hidden()"><%=list.get(i).getId() %></td>
        <td><input type=hidden id="id" name=id value="<%=list.get(i).getId() %>"/></td>
      </tr>
     <%}%>
    </table><div style="position:absolute;" id=tip></div>
    <p><a href="/OldMovies/add.jsp">add</a></p>
    </body>
    </html>