将突出显示的单元格返回php

时间:2016-04-19 18:38:20

标签: javascript php

所以我正在使用此链接中的示例代码 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>

**添加在按钮

1 个答案:

答案 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 :(");
        }
    });
});