1

我的布局中有两个 div。我在左边的 div 中写了表格，在右边的 div 中有一个表格。

单击保存按钮后，必须刷新表所在的右侧 div。有人能帮我吗？

这是我的代码

//This is my **Left div**, Where i need to enter the **values** and when I click on **save** button, All the values must be displayed in the **right div** and that **right div must be refreshed**


<div align="left"> 

  <div id="bundle_number_text_label"> Bundle Number </div>
  <input id="bundlenumber" style=" padding: 3px 0;" type="text" name="bundle_number"  /><br />


  <div id="date_text_label"> Date </div>
<input type="text" style=" padding: 3px 0;" id="date" READONLY/><br/>




 <div id="length_text_label"> Length </div>
 <input id= "length" style=" padding: 3px 0;" type="text"  name="Length" /> (in mm)



 <input type="radio" name="browser" value="number" checked>
 <label><?=lang('number_txt')?></label>
    <input type="radio" name="browser" value="Balance"/>
    <label><?=lang('balance_txt')?></label></br>
 <input id= "rate" style=" padding: 3px 0;" type="text"  name="Rate" />

 <input type="button" value="Save" name="Save" id="save_id">

 </div>

//这是我右边的div，点击保存按钮后，所有的值都必须显示在这里，这个div必须刷新。

<div id="div_save" align="left">  
 <table align="center !important" width="80%"  border="1px" cellspacing="0" cellpadding="0">
 <tr>
  <th>Select</th>&nbsp;
  <th>Bundle Number</th>&nbsp
  <th>Date</th>&nbsp;
  <th>Length(mm)</th>&nbsp;
  <th>Numbers</th>
  <th style="display:none;">Party id</th>
 </tr>

   <tr>
   <td align="center" valign="top">  
  <input type="radio" /></td> 
  <td align="center" valign="top"></td>   
  <td align="center" valign="top"></td>   
  <td align="center" valign="top"></td>  
  <td align="center" valign="top"></td> 
 </tr>

    <tr>
   <td align="center" valign="top">  
  <input type="radio" /></td> 
  <td align="center" valign="top"></td>   
  <td align="center" valign="top"></td>   
  <td align="center" valign="top"></td>  
  <td align="center" valign="top"></td> 
 </tr>
 </table>
 </div>
4

5 回答 5

1

您可以通过两种或三种时尚的方式做到这一点：

您可以将要刷新的所有内容移动到外部文件中，并使用<iframe>标签仅更新该特定框架，或者

您可以使用 Ajax 仅刷新所需的 html 部分，如下例所示：http ://www.w3schools.com/Ajax/ajax_example.asp 。

但也许最简单的方法是利用 jQuery 的强大功能。在 jQuery 中，您可以这样做：

$('#first_div').load('test.html', function() {
  alert('Loading completed.'); //callback function
});
于 2012-06-05T10:09:28.610 回答
0

您可以将 Ajax 用于此类需求

于 2012-06-05T10:05:15.760 回答
0

使用 jQuery 通过 AJAX 发布表单。

var formData = $('#MyForm').serialize();
$.post( 'url-to-POST-to.html', 
    formData,
    function(data){
        $('#div_save').html( data);
    }
);

成功后，具有该 ID 的 div 将其内容替换为服务器为响应您的 POST 而发回的任何内容。

PS：左侧 div 中的 FORM 标签在哪里？

于 2013-05-08T02:34:50.420 回答
0

用于$('#the_one_div').load('source.html');在按钮 click() 事件中重新加载 div 的内容。

http://api.jquery.com/load/

于 2012-06-05T09:46:34.837 回答
0

最简单的方法是在您的服务器端提供一些支持以仅呈现您的表格。

然后，做

var submittedData = $('#myForm').serialize(); 
$('#myTable').load('http://www.example.com/myPage?renderTable', submittedData);

更高级的版本会得到一个 json 字符串，并在客户端创建表。

于 2012-06-05T09:47:21.217 回答