题记：最近做关于OpenDaylight的项目，然还用到了一些前端和javaee的相关技术，本代码实现的是通过数据库部分读到的json数据，数据库部分没有写出，填充到table表格中，并且也可以实现table表格中用户自行进行增删等操作，主要是jquery、js.列出但是参考的资料：http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html  

http://hmkcode.com/jquery-each-json/

1html部分 注意js的链接地址，还有jquery版本，jquery如果用1.11.1版本的话，程序运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="hongwei">

    <link href="Scripts/bootstrap.min.css" rel="stylesheet">
    <link href="Scripts/bootstrap-theme.min.css" rel="stylesheet">
<title>Device Mangement</title>
</head>
<body>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <script src="Scripts/bootstrap.min.js"></script>
   <script src="devicetable77.js"></script>
   <script type="text/javascript" src="Scripts/zDrag.js"></script>
   <script type="text/javascript" src="Scripts/zDialog.js"></script>
<h1> Device management</h1>
<body>
 <table id="table" class="table table-striped table-bordered table-hover">
     <tr>
       <th><input id="ckbAll" type="checkbox" /></th>
       <th>IP</th>
       <th>Group</th>
     </tr>
 </table>
 <input id="removebtn" class="btn btn-default" type="button" value="remmove">
 <input id="addbtn" class="btn btn-default" type="button" value="add">
 <input id="getbtn" class="btn btn-default" type="button" value="get">
 <div class="item">
    <input type="text" id="getval1" value="输入的数据"/>
	<input type="text" id="getval2" value="输入的数据"/>
    <br/>
</div>
</body> 
</html>

2 js部分

  这部分主要实现了几个函数，注意each函数的用法，并且index是从0开始的，注意字符串的拼接，以及双引号嵌套的使用。js或者html中要求是，“  ‘ ’  ” 双引号中是单引号，还有就是向checkbox的id作为一个变量的用法应。其中感觉比较重要的是通过一个json字符串给table显示。（变量一定要“+xx+”v这种形式）
 $("#table").append($('<tr/>')
.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
.append($('<td/>').html(article.ip))
   .append($('<td/>').html(article.group)) 
</pre></div><div><pre name="code" class="javascript">$(document).ready(function () {
     //function refreshTable()
	var articles = [
        { 
            "ip":"80.4.2.59",
            "group":"A"
        },
        {
            "ip":" 80.4.2.58 ",
            "group":"B"
        },
		{
            "ip":" 10.75.199.244 ",
            "group":"C"
        }
    ];
    // 1. remove all existing rows
    $("tr:has(td)").remove();
    // 2. get each article //遍历article中的每一个元素
    $.each(articles, function (index, article) {
        // 2.1 Create table column for group
        // 2.2 Create a new row and append 3 columns (ip+url, group, tags)
        $("#table").append($('<tr/>')
				.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
				.append($('<td/>').html(article.ip))
			    .append($('<td/>').html(article.group))
        );  
    });              
	$("#removebtn").bind("click", delOneRow);
    $("#addbtn").bind("click", insertRowLast),
    $("#getbtn").bind("click", getRowlValue),
    $("#table tr:gt(0) td:first-child input:checkbox").bind("click",checkOne);
});
var c=-1;
function checkOne() { //this return is which checkbox is checked
    var allBox = $(":checkbox"); //only choose one
    allBox.click(function () {
        allBox.removeAttr("checked");
        $(this).attr("checked", true);
        });
	var i = $("#table tr:gt(0) td:first-child input:checkbox").length;
    c = -1;
    var j=0;
    $("#table tr:gt(0) td:first-child input:checkbox").each(function () {
    	j+=1;
		if ($(this).attr("checked")==true) {
            //c += 1;//only select one,c is number of select
            var q=1;
			while(i--){
				if(j==q){
				c=j-1;
				return false;
				}
				q++;
			}
         }
     });
}
function delOneRow() {
	//checkOne();//which row
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+")").remove();
	}
}
 function insertRowLast() {
    var diag = new Dialog();
	diag.Title = "please input device information";
	diag.URL = "testeject.html";
	diag.OKEvent = function(){
	var ip = diag.innerFrame.contentWindow.document.getElementById('ip').value;
	var group = diag.innerFrame.contentWindow.document.getElementById('group').value; 
	var newRow = "<tr><td><input id='check10' type='checkbox'/></td><td>"+ip+"</td><td>"+group+"</td></tr>";
	$("#table tr:last").after(newRow);
	diag.close();
	};
	//after click ok，oKEvent will be run 
	diag.show();
	var doc=diag.innerFrame.contentWindow.document;
	doc.open();
	doc.write('<html><body>I   P<input id="ip" type="text"/> </br> </br> </br>Group<input id="group" type="text"/></body></html>');
	doc.close();
} 
function getRowlValue() {
    var v = "";
    //$("#table tr:gt(0):eq(1) td").each(function () {
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+") td").each(function () {    
		v += $(this).text() + " ";
		});
	alert(v);
	}
	
}

3 diag 部分已经在上面代码写出来，这部分写的不好，希望可以用bootstrap再加工下

附录：工程下载链接地址： 点击打开链接 ，注意有几个html文件，最终调试的是device777.html
4 后来在项目中调试后的是以下的代码部分，增加了模态框并且和服务器通信也成功：
html： 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="haofan">
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<title>Device Mangement</title>
</head>
<br>
<br>
<br>
<body>
	<script type="text/javascript">
     function loadNavBar(){
        var req = new XMLHttpRequest();
        req.open("GET", "../navbar.html", false);
        req.send();
        document.write(req.responseText);
     }
     loadNavBar();
   </script>
	<script src="../../libraries/jquery/jquery-1.11.1.min.js"></script>
	<script src="../../dist/js/bootstrap.min.js"></script>
	<script src="../../libraries/jquery/jquery-ui.min.js"></script>
	<script type="text/javascript" src="Scripts/devicetableever.js"></script>
<body>
	<table id="table"
		class="table table-striped table-bordered table-hover">
		<tr>
			<th></th>
			<th>Name</th>
			<th>IP</th>
			<th>Group</th>
		</tr>
	</table>
	<input id="removebtn" class="btn btn-default" type="button"
		value="remmove">
	<button id="addbtn" class="btn btn-default" type="button">add</button>
	<button id="editbtn" class="btn btn-default" type="button">edit</button>
	<input id="getbtn" class="btn btn-default" type="button" value="get">
	<div id="errro-msg"></div>
	<!-- modal remove -->
	<div class="modal" id="modaledit" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Edit Rfswitch Information</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="inputname2" class="col-sm-2 control-label">Name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditname">
							</div>
						</div>
						<div class="form-group">
							<label for="inputip2" class="col-sm-2 control-label">IP</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditip"
									readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<label for="inputgroup2" class="col-sm-2 control-label">Group</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditgroup">
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
					<button type="button" class="btn btn-primary" id="editsubmitbutton">submit</button>
				</div>
			</div>
		</div>
	</div>
	<!-- modal add -->
	<div class="modal" id="modaladd" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Rfswitch Information</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="inputname1" class="col-sm-2 control-label">Name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddname"
									placeholder="please input rfswitch name">
							</div>
						</div>
						<div class="form-group">
							<label for="inputip1" class="col-sm-2 control-label">IP</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddip"
									placeholder="please input rfswitch ip">
							</div>
						</div>
						<div class="form-group">
							<label for="inputgroup1" class="col-sm-2 control-label">Group</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddgroup"
									placeholder="please input rfswitch group">
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
					<button type="button" class="btn btn-primary" id="addsubmitbutton">submit</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
4 js部分： 
window.οnlοad=function(){
	//var articles = getAllDbdata();
	getAllDbdata();	
    $("#removebtn").bind("click", delOneRow);
    $("#addbtn").bind("click", insertRowLast),
    $("#getbtn").bind("click", getRowlValue),
    $("#editbtn").bind("click", editRowlValue),
    $("#table tr:gt(0) td:first-child input:checkbox").bind("click",checkOne);
};
function getAllDbdata(){
	$("#error-msg").empty();
	var query = JSON.stringify(getQueryInput("get","","",""));
    var get = sendReq("/device/GetDB", query);
    if (get == null){
    	 $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
 				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
 				'<span aria-hidden="true">×</span></button><strong>insert database!</strong></div>');
    	return;
    }
    var articles1 = get.resultDB;articles:"[{},{}]" must use eval to [{},{}]
    var articles = JSON.parse(articles1);//both this method and eval() can run  
    //var articles = eval(articles1);//very important.
   //var articles = [{ "name" : "rfswitch1" , "ip" : "80.4.2.59" , "group" : "A"}, { "name" : "rfswitch2" , "ip" : "10.75.199.244" , "group" : "B"}, { "name" : "rfswitch3" , "ip" : "10.75.192.15" , "group" : "B"}, { "name" : "rfswitch2" , "ip" : "192.168.1.3" , "group" : "A"}, { "name" : "frank" , "ip" : "192.168.1.0" , "group" : "frank"}, { "name" : "frank1" , "ip" : "192.168.1.0" , "group" : "frank1"}, { "name" : "frank2" , "ip" : "198.189" , "group" : "C"}, { "name" : "rfswich4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch3" , "ip" : "192.168.1.9" , "group" : "D"}];
    $("tr:has(td)").remove();
    // 2. get each article
    $.each(articles, function (index, article) {
        // 2.1 Create table column for group
        // 2.2 Create a new row and append 3 columns (ip+url, group, tags)
        $("#table").append($('<tr/>')
				.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
				.append($('<td/>').html(article.name))			
				.append($('<td/>').html(article.ip))
			    .append($('<td/>').html(article.group))
        );  
    });
}
var c=-1;
function checkOne() { //this return is which checkbox is checked
    var allBox = $(":checkbox"); //only choose one
    allBox.click(function () {
        allBox.removeAttr("checked");
        $(this).prop("checked", true);
        });
	var i = $("#table tr:gt(0) td:first-child input:checkbox").length;
    c = -1;
    var j=0;
    $("#table tr:gt(0) td:first-child input:checkbox").each(function () {
    	j+=1;
		if ($(this).is(":checked")==true) { //low jquery: attr("checked")
            //c += 1;//only select one,c is number of select
            var q=1;
			while(i--){
				if(j==q){
				c=j-1;
				return false;
				}
				q++;
			}
         }
     });
}
function delOneRow() {
	//checkOne();//which row
	//
	if(c!=-1)
	{
		var arraystr = getRowlValue();
		var name = arraystr[1];
		var ip = arraystr[2];
		var group = arraystr[3];
		var query = JSON.stringify(getQueryInput("remove",name,ip,group));
        var get = sendReq("/device/RemoveDB", query);
        if(get.msg == "failed")
        {
        	  $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
      				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
      				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
        	  return;
        }
		//$("#table tr:gt(0):eq("+c+")").remove();
 	   window.location.reload();
	}
}
 function insertRowLast() {
		  $("#modaladd").modal("toggle");
    		$("#modaladd").draggable({
    		    handle: ".modal-header"
    		});
		  $("#addsubmitbutton").click(function(){
	            var query = JSON.stringify(getQueryInput("add","","",""));
	            var get = sendReq("/device/AddDB", query);
	            if (get == null){
	            	return;
	            }
	            if(get.msg != ""){
	            	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	            				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	            				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaladd').modal('hide');
	            	   return;
	           }
	           if(get.msg == ""){
	        	   $('#modaladd').modal('hide');
		            //getAllDbdata();
	        	   window.location.reload();
	           }
	           return;
	      });
}
function editRowlValue() {
	if(c!= -1){
		var arraystr = getRowlValue();
		$("#inputeditname").val(arraystr[1]);
		$("#inputeditip").val(arraystr[2]);
		$("#inputeditgroup").val(arraystr[3]);
		$("#modaledit").modal("toggle");
		$("#modaledit").draggable({handle: ".modal-header"});//must import jquery-ui.min.js,let modal drag
		 $("#editsubmitbutton").click(function(){
			var name = $("#inputeditname").val();
			var ip = $("#inputeditip").val();
			var group = $("#inputeditgroup").val();
			 var query = JSON.stringify(getQueryInput("edit",name,ip,group));
	          var get = sendReq("/device/EditDB", query);
	          if (get == null){
	          	return;
	          }
	          if(get.msg != ""){
	          	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	          				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	          				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaledit').modal('hide');
	          	   return;
	         }
	         if(get.msg == ""){
	      	   $('#modaledit').modal('hide');
        	   window.location.reload();
	         }
	         return;
	    });	
	}
}
function getRowlValue() {
    var v = "";
    //$("#table tr:gt(0):eq(1) td").each(function () {
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+") td").each(function () {    
		v += $(this).text() + " ";
		});
	}
	var fenstr = v.split(" ");
	return fenstr;
	
}
function getQueryInput(type,name,ip,group) {
    var input = {
            "name" : null,
            "ip" : null,
            "group" : null
        };
    if(type == "add"){
    	input["name"] = $("#inputaddname").val();
        input["ip"] = $("#inputaddip").val();
        input["group"] = $("#inputaddgroup").val();
    }
    if(type == "remove"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    if(type == "edit"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    return { "input" : input };
}
function sendReq(url, query) {
    var req = new XMLHttpRequest();
    req.open("POST", url, false);
    req.setRequestHeader("Content-type","application/json");
    req.send(query.toString());
    if(req.responseText == ""){
    	return null;
    }
    var get_response = jQuery.parseJSON(req.responseText).output;
    return get_response;
}



# jquery
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 4 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区