读书人
栏目▼

使用jS代码循环添加tr解决方案

发布时间： 2014-01-03 00:30:09 作者： rapoo

使用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"/>
</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>
    <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>


如代码所示：
要求：使用JS向网页添加table里的tr标签，并且 src的地址根据IP地址192.168.8.1逐一递增 最多200；
如果在网页中添加一个文本框输入需要添加到的IP是多少个，能实现么；
在更改src链接中的IP地址时，同时也需要更改这个tr中br的IP地址。
请各路大神帮忙看下，应该如何来解决这个问题。


[解决办法]

<!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>

[解决办法]
<!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

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net