1

レイアウトに 2 つの 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

2 つまたは 3 つのファッショナブルな方法でそれを行うことができます。

更新したいすべてのコンテンツを外部ファイルに移動し、<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

$('#the_one_div').load('source.html');ボタンクリック（）イベントで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 に答える