使用jS代码循环添加tr

戈菲 2014-01-02 10:49:05 


<!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地址。
请各路大神帮忙看下，应该如何来解决这个问题。
...全文
595 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
别闹腰不好 2014-01-02
  • 打赏
  • 举报
 回复
<!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
_拙计 2014-01-02
  • 打赏
  • 举报
 回复
两个for循环不就好了
Cocl 2014-01-02
  • 打赏
  • 举报
 回复 
<!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>
戈菲 2014-01-02
  • 打赏
  • 举报
 回复
@ #1 你好 ： 很感谢你的回帖，我试运行了一次，你的代码很好， 如果在网页中设置了添加IP地址的功能，对于这个功能这样实现最好： 在文本框里输入的数字是6的话，那么显示出来的结果应该是从192.168.8.1-192.168.8.6（就从1开始），而不是一次只能输入一个IP地址。 谢谢
正在努力的PP君 2014-01-02
  • 打赏
  • 举报
 回复
http://blog.csdn.net/yaominhua/article/details/6604838 可以去参考下
别闹腰不好 2014-01-02
  • 打赏
  • 举报
 回复
<!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>
似梦飞花 2014-01-02
  • 打赏
  • 举报
 回复
放到cookie或者session或者后台数据库试试
戈菲 2014-01-02
  • 打赏
  • 举报
 回复
@ #1 你好 1、你的代码我验证过了，非常不错，但是有个问题，我一刷新那么就得重新出入IP地址，能不能在网页中添加一个按钮，功能为刷新这些src链接的图片，不需要重新输入IP地址， 2、在第一次输入这个IP地址段后，能增加一个下拉菜单将这个IP段保存下来，供以后选择使用。
JS实现的样式切换功能tableCSS实例
本文实例分析了JS实现的样式切换功能tableCSS。分享给大家供大家参考，具体如下： 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;} //参数及默认参数 var options = { ta
js动态添加<tr>
1.HTML CODE: <form id="addNewsFormData" name="addNewsFormData" isCheck="true" action="controller.SysRuleModelController"> <table id="addNewsTableId" class="formTableSwap" border="0" align="...
Linux0.11内核初始化讲解与调试
结合bochs仿真调试工具边讲解边调试linux0.11版本内核初始化过程，通过该课程可以学习和理解关于linux内核在内存中的分布、分段及分页机制、逻辑地址线性地址及物理地址的区别，更系统的理解CPU实模式及保护模式等。课程会以下面几个部分逐次展开：80386 CPU资源 80386 内存寻址机制 Linux多任务相关的TR寄存器和TSS任务状态段数据结构 中断和异常 Linux引导初始化--代码搬移过程 Bootsect代码详解 Bootsect代码详解续 bootsect里的设备号问题  bootsect代码解析之system模块搬移 setup.s程序详解 head.s程序详解 具体视频内容会根据讲解需要进行微调，详细内容参见csdn blog链接：https://blog.csdn.net/yuanfen5200/article/category/8692077
js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置             var ...
原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR，TD实现方法。分享给大家供大家参考。具体实现方法如下：var tempRow=0;var maxRows=0;function insertRows(){tempRow=table1.rows.length-1;maxRows=tempRow;tempRow=tempRow+1;var Rows=table1.rows;//类似数组的Rowsvar ne...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章