使用jS代码循环添加tr


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1<---strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="cache-control" content="max-age=5"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
<script language="javascript">
$(function(){$("#but").click(function(){var val=$("#exid").val();
var str=" <tr>"
        +"<td>"
          +"<img id=\"image\" src=\"http://"+val+"/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
           +"<br>"+val+"</br>"
        +"</td>"        +"<td>"
          +"<img id=\"image\" src=\"http://"+val+"/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
           +"<br>"+val+"</br>"
        +"</td>"        +"<td>"
          +"<img id=\"image\" src=\"http://"+val+"/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
           +"<br>"+val+"</br>"
        +"</td>"        +"<td>"
          +"<img id=\"image\" src=\"http://"+val+"/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
           +"<br>"+val+"</br>"
        +"</td>"
      +"</tr>";$(str).appendTo($("table"));});
})
</script>
</head>
  <body>
  <!-- start header -->
    <style type="text/css">
    td{text-align:center;border-style:solid;border-width:1px 1px 1px 1px;}
    img{border-style:solid;border-width:1px 1px 1px 1px;}
    p{text-align:center;}
    </style>
<input id="exid" type="text"/><input id="but" type="button" value="添加" />
    <table align="center">
      <tr>
        <td>
          <img id="image" src="http://192.168.8.1/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/> 
            <br>192.168.8.01</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.1/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.01</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.1/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.01</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.1/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.01</br>
        </td>
      </tr>
      <tr>
        <td>
          <img id="image" src="http://192.168.8.2/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/> 
            <br>192.168.8.02</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.2/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.02</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.2/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.02</br>
        </td>
        <td>
          <img id="image" src="http://192.168.8.2/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
            <br>192.168.8.02</br>
        </td>
      </tr>
    </table>
  </body>
</html>

解决方案 »

  1.   

    http://blog.csdn.net/yaominhua/article/details/6604838
    可以去参考下
      

  2.   

    @ #1 
    你好 ：
    很感谢你的回帖，我试运行了一次，你的代码很好，
    如果在网页中设置了添加IP地址的功能，对于这个功能这样实现最好：
    在文本框里输入的数字是6的话，那么显示出来的结果应该是从192.168.8.1-192.168.8.6（就从1开始），而不是一次只能输入一个IP地址。
    谢谢
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1<---strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="cache-control" content="max-age=5"/>
    </head>
      <body>
      <!-- start header -->
        <style type="text/css">
        td{text-align:center;border-style:solid;border-width:1px 1px 1px 1px;}
        img{border-style:solid;border-width:1px 1px 1px 1px;}
        p{text-align:center;}
    #Tab1 td img{ width:283px;height:230px;}
    #Tab1 td b{ font-weight:400;}
        </style>
        <table align="center" id="Tab1">    </table>
        <script>
        function addTr(){
    var Tab1 = document.getElementById("Tab1");

    for(var i=1; i<=2; i++){
    var _ip = "192.168.8." + i,
    _tr = document.createElement("tr");

    for(var j=0; j<4; j++){
    var imgSrc = "http://"+_ip+"/photo/ch"+j+".jpg?r="+new Date().getTime(),
    _td = document.createElement("td"),
    _img = document.createElement("img"),
    _br = document.createElement("br");
    _b = document.createElement("b");
    _img.src = imgSrc;
    _b.innerHTML = _ip;
    _td.appendChild(_img);
    _td.appendChild(_br);
    _td.appendChild(_b);
    _tr.appendChild(_td);
    }

    Tab1.appendChild(_tr);
    }
    }
        addTr()
        </script>
      </body>
    </html>
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1<---strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="cache-control" content="max-age=5"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
            </script>
    <script language="javascript">
    $(function(){$("#but").click(function(){var tes=$("#exid").val();var a=tes.split("-");
    var stat=a[0].split(".")[3];var end=a[1].split(".")[3];
    var ip=a[0].split(".")[0]+"."+a[0].split(".")[1]+"."+a[0].split(".")[2]+".";
    for(stat;stat<=end;stat++){

    var str=" <tr>"
            +"<td>"
              +"<img id=\"image\" src=\"http://"+ip+"."+stat+"/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
               +"<br>"+ip+"."+stat+"</br>"
            +"</td>"        +"<td>"
              +"<img id=\"image\" src=\"http://"+ip+"."+stat+"/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
               +"<br>"+ip+"."+stat+"</br>"
            +"</td>"        +"<td>"
              +"<img id=\"image\" src=\"http://"+ip+"."+stat+"/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
               +"<br>"+ip+"."+stat+"</br>"
            +"</td>"        +"<td>"
              +"<img id=\"image\" src=\"http://"+ip+"."+stat+"/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013\" width=\"283\" height=\"230\"/> "
               +"<br>"+ip+"."+stat+"</br>"
            +"</td>"
          +"</tr>";$(str).appendTo($("table"));
    }});
    })
    </script>
    </head>
      <body>
      <!-- start header -->
        <style type="text/css">
        td{text-align:center;border-style:solid;border-width:1px 1px 1px 1px;}
        img{border-style:solid;border-width:1px 1px 1px 1px;}
        p{text-align:center;}
        </style>
    <input id="exid" type="text"/><input id="but" type="button" value="添加" />
        <table align="center">
          <tr>
            <td>
              <img id="image" src="http://192.168.8.1/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/> 
                <br>192.168.8.01</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.1/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.01</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.1/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.01</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.1/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.01</br>
            </td>
          </tr>
          <tr>
            <td>
              <img id="image" src="http://192.168.8.2/photo/ch0.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/> 
                <br>192.168.8.02</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.2/photo/ch1.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.02</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.2/photo/ch2.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.02</br>
            </td>
            <td>
              <img id="image" src="http://192.168.8.2/photo/ch3.jpg?r=Saturday July 31 14:10:27 2013" width="283" height="230"/>
                <br>192.168.8.02</br>
            </td>
          </tr>
        </table>
      </body>
    </html>
    你自己做个验证，文本框输入格式：192.168.8.1-192.168.8.6
      

  5.   

    @ #1 你好1、你的代码我验证过了，非常不错，但是有个问题，我一刷新那么就得重新出入IP地址，能不能在网页中添加一个按钮，功能为刷新这些src链接的图片，不需要重新输入IP地址，
    2、在第一次输入这个IP地址段后，能增加一个下拉菜单将这个IP段保存下来，供以后选择使用。
      

  6.   

    放到cookie或者session或者后台数据库试试