ajax实现在直接在表格中修改数据

<script type="text/javascript">
var req;
var gID;
function changeToInput(id) {
 var oNP = document.getElementById(id);
 var value = oNP.value;

//outerHTML把oNP对象整个替换掉
 oNP.outerHTML = "<input type='text' id='" + id + "' value='" + value + "' size='5' onblur='change(this.id)'>";
 document.getElementById(id).focus();
}

function change(id) {
 var oNP = document.getElementById(id);
 var value = oNP.value;
 gID = id;
 init();

//提交数据到修改数据的页面修改
 var url = "ChangePrice.jsp?id=" + escape(id) + "&normalprice=" + value;
 req.open("GET", url, true);
 req.onreadystatechange = callback;
 req.send(null);
 
}

function init() {
 if(window.XMLHttpRequest) {
  req = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
 }
}

function callback() {
 if(4 == req.readyState) {
 
  if(200 == req.status) {
 
   var oNP = document.getElementById(gID);
   var value = oNP.value;
   oNP.outerHTML = "<span style='background:gray' id='" + gID + "' value='" + value + "' onclick='changeToInput(this.id)'>" + value + "</span>";
  }
 }
 
}

</script>

 

 

<%
 for (int i = 0; i < products.size(); i++) {
  Product p = products.get(i);
%>

<tr>
 <td class="altbg2" align="center">
  <!-- 复选框 -->
  <input type="checkbox" name="id" value="<%=p.getId()%>"/>
 </td>
 <td class="altbg1" align="center" nowrap="nowrap">
  <%=p.getId()%>
 </td>
 <td class="altbg2" align="center">
  <%=p.getName()%>
 </td>
 <td class="altbg1" align="center">
  <%=p.getDescr()%>
 </td>
 <td class="altbg1" align="center">
  <span id="<%=p.getId()%>" style="background:red" onclick="changeToInput(this.id)" value="<%=p.getNormalPrice() %>">
   <%=p.getNormalPrice() %>
  </span>
 </td>
 <td class="altbg1" align="center">
  <%=p.getMemberPrice()%>
 </td>
 <td class="altbg1" align="center">
  <%=new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
    .format(p.getPdate())%>
 </td>
 <td class="altbg1" align="center">
  <%//=CategoryService.getInstance().loadById(p.getCategoryId()).getName()%>
  <%=p.getCategory().getName()%>
 </td>
 <td class="altbg1" align="right">
  <a target="detail" href="ProductDelete.jsp?id=<%=p.getId()%>" onclick="return confirm('真的要删?')">删</a>
  <a target="detail" href="ProductModify.jsp?id=<%=p.getId()%>">改</a>
  <a target="detail" href="ProductUpload.jsp?id=<%=p.getId()%>">上传</a>
 </td>
</tr>

<%
}
%>