所以我正在使用此链接中的示例代码 Select Cells On A Table By Dragging 建立一个数字1-192的网格,这部分工作得很好,但我很好奇我将如何返回"突出显示"细胞到PHP?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
table td {
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
}
table td.highlighted {
background-color:#999;
}
</style>
</head>
<body>
<form action='test.php' method='post'>
<table cellpadding="0" cellspacing="1" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<table>
<tbody>
<tr>
<input type='submit' name='test' value = 'test' />
</tr>
</tbody>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>
**添加在按钮
中答案 0 :(得分:1)
这可能需要对您的具体情况稍作修改,但它应该非常接近您的需要。我已经包含了一些评论来表明发生了什么。
// bind a click handler to your button
$("input[name='test']").on("click", function() {
var selectedValues = [];
// iterate through each of the highlighted cells
$(".highlighted").each(function(){
// push the content of the current cell into the array
selectedValues.push($(this).text());
});
// invoke ajax to send the data to your server
$.ajax({
url: "http://yourdomain.com/somepage.php",
method: "GET",
data: {
selectedValues: selectedValues
},
success: function(){
alert("It Worked!");
},
error: function(){
alert("It Didn't Work :(");
}
});
});