<!DOCTYPE html>
<html>
<head>
<title>LED Remote Control Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<h1>LED Remote Control using REST API!</h1>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p class="lead">徐凯经验分享小站</p>
</div>
</div>
<div class="row">
<div class="span12">
<table class="table table-hover">
<thead>
<tr>
<th>编号 ID</th>
<th>描述 DESC</th>
<th>状态 STATUS</th>
<th>动作 ACTION</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>RPi.PCF8574.IO0</td>
<td>ON</td>
<td>ACTION</td>
</tr>
<tr>
<td>2</td>
<td>RPi.PCF8574.IO1</td>
<td>OFF</td>
<td>ACTION</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span12">
<p class="text-right lead">如果有问题请邮件我，别客气</p>
<p class="text-right lead">
<em>Email:xukai19871105@126.com</em>
</p>
</div>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>编号 ID</th>
<th>描述 DESC</th>
<th>状态 STATUS</th>
<th>动作 ACTION</th>
</tr>
</thead>
<tbody>
<tr dev_id="1">
<td>1</td>
<td>RPi.PCF8574.IO0</td>
<td >off</td>
<td>
<button type="button" class="btn btn-primary btn-xs">Toggle</button>
</td>
</tr>
<tr dev_id="2">
<td>2</td>
<td>RPi.PCF8574.IO1</td>
<td>off</td>
<td>
<button type="button" class="btn btn-primary btn-xs">Toggle</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$(‘.btn‘).on("click",function(){
// 获得 tr元素
var trobj = $(this).parent().parent();
// tr元素中包含 dev_id属性
var dev_id = trobj.attr(‘dev_id‘);
console.log( dev_id );
// 访问该tr元素的所有子td元素
var tdobj = $(trobj).children("td");
var status_obj = $(tdobj).eq(2);
var status_str = status_obj.text();
console.log(status_str);
if( status_str == "on"){
status_obj.text("off");
sendLedControl( dev_id , "off" );
}else{
status_obj.text("on");
sendLedControl( dev_id , "on" );
}
});
});
</script> 
function sendLedControl( dev_id , cur_status ){
$.ajax({
url: ‘/api/leds/‘ + dev_id, // /api/leds/1
async: true,
dataType: ‘json‘,
type: ‘PUT‘,
data: JSON.stringify({status:cur_status}),
success: function(data , textStatus){
console.log("success");
},
error: function(jqXHR , textStatus , errorThrown){
console.log("error");
},
});
} 
原文：http://blog.csdn.net/xukai871105/article/details/18862569