初学者，问题描述不好，还请各位见谅，继续看完小弟下面的代码。

 

想实现功能如下：

 

有一栋楼来出租，用网页来分别显示每个房间的三个状态，用鼠标点相应的房间能在三个状态间相互切换。

 

小弟只实现单个房间的状态切换，多个不懂实现，请各位解答怎么来实现多个房间的切换，以及保存它的状态，以免下次打就还原到初始状态。

 

 

 

<title>无标题文档</title>

<script type="text/javascript">
   
    var value_1="未售";
  
     
    function setValue(theID,theText)
    {
      var xx=document.getElementById(theID);
      xx.value=theText;     
     
      if(theText=="未售")
      {
          xx.style.background='red';
      }
     
       if(theText=="已售")
      {
          xx.style.background='yellow';
      }
     
     
       if(theText=="已退")
      {
          xx.style.background='blue';
      }
     
   
    }
   
   
    function click1()
      {   
     
          if(value_1=="未售")
          {
              value_1="已售";
              setValue("span_1",value_1);
              return;
          }
         
          if(value_1=="已售")
          {
              value_1="已退";
              setValue("span_1",value_1);
              return;
          }
         
          if(value_1=="已退")
          {
              value_1="未售";
              setValue("span_1",value_1);
              return;
          }
      }
</script>
</head>
  <table width="100%" border="1">
    <tr align="center">
      <td>101</td>
      <td > <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"> </td>
      <td>102</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>103</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>104</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>105</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>106</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
    </tr>
    <tr align="center">
      <td>201</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>202</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>203</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>204</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>205</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
      <td>206</td>
      <td> <input type="text"  id="span_1"  readonly="readonly" style="background:red; width:100px;" onclick="click1()"></td>
   ....................

 

1.你的这些房间的状态你得保存在数据库或者什么的然后用，ajax去请求。。然后显示每个房间的状态。
2.写一个ＪＳ专门用来显示的状态构建房间原型。然后是房间实例。
3.然后每个房间的状态切换.,点击的时候ＡＪＡＸ去请求一下更改一下存储的数据就可以了。这个思路还是很简单的。

看到那么多tr td就知道是个初学者   后台说不定都没学 你还说什么ajax 额


tr td 不要写死 用js动态插入   定义一个object的数据源 当作模拟数据
然后再去考虑其他的问题吧