修改了几遍,firefox还是显示不出效果,求高手帮忙改改!谢谢!
<html>
<script language=javascript>
function abc()
{
var tb = document.all.table1;
var currentType = "";
for(var i=1;i<tb.rows.length;i++)
{
if(tb.rows[i].type==currentType)
{
continue;
}
currentType = tb.rows[i].type;
var currentText = "";
switch(currentType)
{
case "computer":
currentText = "电脑";
break;
case "mouse":
currentText = "鼠标";
break;
case "keyboard":
currentText = "键盘";
break;
}
var tr = tb.insertRow(i);
var td = tr.insertCell(-1);
td.style.backgroundColor = "#0000cc";
td.colSpan = 3;
td.innerHTML = currentText;
i++;
}
}
</script>
<body>
<input type=button value=为表格加类型行 onclick=abc()><br/>
<table id=table1  id="1" width="200" border="1">
  <tr>
    <td>名称</td>
    <td>数量</td>
    <td>单价</td>
  </tr>
  
  <tr type=computer>
    <td>电脑1</td>
    <td>1</td>
    <td>5000</td>
  </tr>
  <tr type=computer>
    <td>电脑2</td>
    <td>2</td>
    <td>8000</td>
  </tr>
    
  <tr type=mouse>
    <td>鼠标1</td>
    <td>2</td>
    <td>30</td>
  </tr>
  <tr type=mouse>
    <td>鼠标2</td>
    <td>5</td>
    <td>80</td>
  </tr>
   
  <tr type=keyboard>
    <td>键盘1</td>
    <td>3</td>
    <td>150</td>
  </tr>
  <tr type=keyboard>
    <td>键盘2</td>
    <td>2</td>
    <td>120</td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    <html>
    <script type="text/javascript">
    function abc() {
    var tb = document.getElementById("table1"); //获取这里要修改
    var currentType = "";
    for(var i = 1 ; i < tb.rows.length ; i ++) {
    if(tb.rows[i].getAttribute("type") == currentType) continue;
    currentType = tb.rows[i].getAttribute("type"); //属性这里要修改
    var currentText = "";
    switch(currentType) {
    case "computer":
    currentText = "电脑";
    break;
    case "mouse":
    currentText = "鼠标";
    break;
    case "keyboard":
    currentText = "键盘";
    break;
    }
    var tr = tb.insertRow(i);
    var td = tr.insertCell(-1);
    tr.setAttribute("type", currentType); //这里要设置type否则在按会出现BUG
    td.style.backgroundColor = "#0000cc";
    td.colSpan = 3;
    td.innerHTML = currentText;
    i++;
    }
    }
    </script>
    <body>
    <input type="button" value="为表格加类型行" onclick="abc()" /><br/>
    <table id="table1" width="200" border="1">
      <tr>
        <td>名称</td>
        <td>数量</td>
        <td>单价</td>
      </tr>
      
      <tr type=computer>
        <td>电脑1</td>
        <td>1</td>
        <td>5000</td>
      </tr>
      <tr type=computer>
        <td>电脑2</td>
        <td>2</td>
        <td>8000</td>
      </tr>
        
      <tr type=mouse>
        <td>鼠标1</td>
        <td>2</td>
        <td>30</td>
      </tr>
      <tr type=mouse>
        <td>鼠标2</td>
        <td>5</td>
        <td>80</td>
      </tr>
       
      <tr type=keyboard>
        <td>键盘1</td>
        <td>3</td>
        <td>150</td>
      </tr>
      <tr type=keyboard>
        <td>键盘2</td>
        <td>2</td>
        <td>120</td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    稍微简化下JS
    <script type="text/javascript">
    var keyAry = {
    computer : "电脑", mouse : "鼠标", keyboard : "键盘"
    };
    function abc() {
    var tb = document.getElementById("table1"); //获取这里要修改
    var currentType = "", tr, td;
    for(var i = 1 ; i < tb.rows.length ; i ++) {
    if (tb.rows[i].getAttribute("type") == currentType) continue;

    currentType = tb.rows[i].getAttribute("type"); //属性这里要修改
    tr = tb.insertRow(i), td = tr.insertCell(0);
    tr.setAttribute("type", currentType); //这里要设置type否则在按会出现BUG
    td.style.backgroundColor = "#0000cc";
    td.colSpan = 3;
    td.innerHTML = keyAry[currentType];
    }
    }
    </script>