Javascript 表数据上的G-mail样式表单提交

我有一个CGI应用程序填充的html数据表行。我希望每一行旁边都有一个复选框，这样我就可以删除多行，就像在gmail中一样

我算出了基本的文本形式，并能够将其发送到CGI程序以删除行，但我不希望必须键入行名称才能一次删除单个文件

当您可以通过复选框选择多个删除时，表单两侧（html浏览器和C-CGI应用程序）的代码是什么样子的？有什么例子吗？（我仅限于JS和HTML，但我认为JS是用于验证的，现在不需要在CGI应用程序端进行.C编码。）

---

多谢各位

看看“AJAX”风格的javascript。当您向服务器发出AJAX请求时，传递所有删除操作。服务器端应该编码为在一个请求中接受多个删除。

查看“AJAX”风格的javascript。当您向服务器发出AJAX请求时，传递所有删除操作。服务器端应编码为在一个请求中接受多个删除。

好的，您可以通过以下几种方式完成：

1） 使所有元素具有相同的形式。将每个复选框命名为相同的名称，但为每个复选框指定一个值，以区分它所代表的记录/id/文件。当浏览器（如果兼容）提交表单时，CGI应用程序应该能够在POST或GET提交中看到HTTP参数。许多CGI应用程序（如PHP）将相同名称的参数组合到一个数组中。你也可以用C来遍历参数列表

// Client side html
<table>
<form>
<tr><td><input type="checkbox" name="id" value="1"/></td><td>Row 1</td></tr>
<tr><td><input type="checkbox" name="id" value="2"/></td><td>Row 2</td></tr>
<tr><td><input type="checkbox" name="id" value="3"/></td><td>Row 3</td></tr>
<tr><td><input type="checkbox" name="id" value="4"/></td><td>Row 4</td></tr>
</form>
</table>

// Server side CGI, using pseudo-code
String[] ids = request.getArrayOfParametersNamed("id");
if(!empty(ids)) {
 for(id in ids) {
   DatabaseControllerModelThingWhatever.deleteById(id);
 }

 // Actually if SQL based you should use a batch statement instead of 
 // one-at-a-time deletes like above
}

// Ok the rows are deleted, either print out the page, or better yet,
// send a redirect so that a user-refresh does not try and re-delete 
// already deleted stuff and also give the user a wierd "resubmit form" warning
// Done

//客户端html
一排
第2排
第3排
第4排
//服务器端CGI，使用伪代码
字符串[]id=request.getArrayOfParametersNamed（“id”）；
如果（！空（ID））{
用于（id中的id）{
DatabaseControllerModelThingWhatever.deleteById（id）；
}
//实际上，如果基于SQL，则应该使用批处理语句而不是
//一次删除一次，如上所述
}
//行被删除，或者打印出页面，或者更好，
//发送重定向，以便用户刷新不会尝试重新删除
//已删除的内容，并向用户发出wierd“重新提交表单”警告
//完成

2） 使用AJAX和某种类型的Javascript库，当用户单击delete时，执行基于AJAX的提交，提交删除选中记录的请求。同时使用Javascript从HTML表中删除行。这意味着用户的页面永远不会完全刷新

 // Client side HTML is same as before, only this time there is a DELETE button with
 // an onclick handler. Also, add a "class" or "id" to each "tr" so we can find it 
 // in the HTML table

 // Pseudo-javascript because I am lazy
 function onDeleteButtonClick() {

  // Get our ids
  var idElements = document.getElementsById("id");

  // Submit an async AJAX request (e.g. use Jquery and send ids as URL params)
  ajaxedDeleteSubmission(idElements);

  // Delete all the rows that should not be there
  for(i = 0; i < tablex.rows.length; i++) {
   // Grab the value of the "id" attribute of each table row (<tr id="?">...</tr>)
   id = tablex.rows[id].id;
   if(id in ids) {
    // Remove the row, forget how because now I just use Jquery.
    tablex.deleteRow(i);
   }
  }
 }

//客户端HTML与以前一样，只是这次有一个带有
//onclick处理程序。另外，在每个“tr”中添加一个“class”或“id”，以便我们可以找到它
//在HTML表中
//伪javascript，因为我很懒
函数onDeleteButtonClick（）{
//拿到我们的身份证
var idElements=document.getElementsById（“id”）；
//提交异步AJAX请求（例如，使用Jquery并将ID作为URL参数发送）
ajaxedDeleteSubmission（理想元素）；
//删除不应该存在的所有行
对于（i=0；i

好吧，您可以通过以下几种方式来实现：

1） 使所有元素具有相同的形式。将每个复选框命名为相同的名称，但为每个复选框指定一个值，以区分它所代表的记录/id/文件。当浏览器（如果兼容）提交表单时，CGI应用程序应该能够在POST或GET提交中看到HTTP参数。许多CGI应用程序（如PHP）将相同名称的参数组合到一个数组中。你也可以用C来遍历参数列表

// Client side html
<table>
<form>
<tr><td><input type="checkbox" name="id" value="1"/></td><td>Row 1</td></tr>
<tr><td><input type="checkbox" name="id" value="2"/></td><td>Row 2</td></tr>
<tr><td><input type="checkbox" name="id" value="3"/></td><td>Row 3</td></tr>
<tr><td><input type="checkbox" name="id" value="4"/></td><td>Row 4</td></tr>
</form>
</table>

// Server side CGI, using pseudo-code
String[] ids = request.getArrayOfParametersNamed("id");
if(!empty(ids)) {
 for(id in ids) {
   DatabaseControllerModelThingWhatever.deleteById(id);
 }

 // Actually if SQL based you should use a batch statement instead of 
 // one-at-a-time deletes like above
}

// Ok the rows are deleted, either print out the page, or better yet,
// send a redirect so that a user-refresh does not try and re-delete 
// already deleted stuff and also give the user a wierd "resubmit form" warning
// Done

//客户端html
一排
第2排
第3排
第4排
//服务器端CGI，使用伪代码
字符串[]id=request.getArrayOfParametersNamed（“id”）；
如果（！空（ID））{
用于（id中的id）{
DatabaseControllerModelThingWhatever.deleteById（id）；
}
//实际上，如果基于SQL，则应该使用批处理语句而不是
//一次删除一次，如上所述
}
//行被删除，或者打印出页面，或者更好，
//发送重定向，以便用户刷新不会尝试重新删除
//已删除的内容，并向用户发出wierd“重新提交表单”警告
//完成

2） 使用AJAX和某种类型的Javascript库，当用户单击delete时，执行基于AJAX的提交，提交删除选中记录的请求。同时使用Javascript从HTML表中删除行。这意味着用户的页面永远不会完全刷新

 // Client side HTML is same as before, only this time there is a DELETE button with
 // an onclick handler. Also, add a "class" or "id" to each "tr" so we can find it 
 // in the HTML table

 // Pseudo-javascript because I am lazy
 function onDeleteButtonClick() {

  // Get our ids
  var idElements = document.getElementsById("id");

  // Submit an async AJAX request (e.g. use Jquery and send ids as URL params)
  ajaxedDeleteSubmission(idElements);

  // Delete all the rows that should not be there
  for(i = 0; i < tablex.rows.length; i++) {
   // Grab the value of the "id" attribute of each table row (<tr id="?">...</tr>)
   id = tablex.rows[id].id;
   if(id in ids) {
    // Remove the row, forget how because now I just use Jquery.
    tablex.deleteRow(i);
   }
  }
 }

//客户端HTML与以前一样，只是这次有一个带有
//onclick处理程序。另外，在每个“tr”中添加一个“class”或“id”，以便我们可以找到它
//在HTML表中
//伪javascript，因为我很懒
函数onDeleteButtonClick（）{
//拿到我们的身份证
var idElements=document.getElementsById（“id”）；
//提交异步AJAX请求（例如，使用Jquery并将ID作为URL参数发送）
ajaxedDeleteSubmission（理想元素）；
//删除不应该存在的所有行
对于（i=0；i

在AJAX示例中，最好在更新GUI之前等待服务器确认（为服务器响应提供一个处理程序）删除服务器上的行。在AJAX示例中，最好等待服务器确认（为服务器响应提供一个处理程序）更新GUI之前已删除服务器上的行。