だいたい想定される、table データを jQuery で行単位で処理する方法です。ダイアログを表示する位置は、デバイスによって調整する必要があると思いますが、殆どの目的はこんな感じで対処できると思います。 table の行をクリック( タップ ) すると、モーダルダイアログ( 実際は DIV )を開いて、行のデータをダイアログ内に転送して処理します。 数値入力は、モバイルを想定して type="tel" にして、iPhone4S で動作確認しました。
| 001 | りんご | 500 |
| 002 | いちご | 300 |
▼ ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
#data {
border-collapse: collapse;
border: solid #000000 1px;
}
#data tr {
cursor: pointer;
}
#data td {
padding: 5px;
border: solid #000000 1px;
}
</style>
<script type="text/javascript">
$(function(){
$("#data tr").each(function(index){
$(this).click(function(){
$( "#code" ).text( $(this).children( "td" ).eq(0).text() );
$( "#namae" ).text( $(this).children( "td" ).eq(1).text() );
$( "#kingaku" ).val( $(this).children( "td" ).eq(2).text() );
var jq = $(this);
$( "#dialog-message" ).dialog({
modal: true,
title: "ダイアログのタイトルです",
close: function() {
console.log("x ボタンがクリックされました");
},
buttons: [
{
text: "確認",
click: function() {
jq.children( "td" ).eq(2).text( $( "#kingaku" ).val() );
$( this ).dialog( "close" );
console.log("確認 ボタンがクリックされました");
}
},
{
text: "キャンセル",
click: function() {
$( this ).dialog( "close" );
console.log("キャンセル ボタンがクリックされました");
}
}
]
});
});
});
});
</script>
<table id="data">
<tr>
<td class="code">001</td>
<td class="name">りんご</td>
<td class="value">500</td>
</tr>
<tr>
<td class="code">002</td>
<td class="name">いちご</td>
<td class="value">300</td>
</tr>
</table>
<div id="dialog-message" title="" style='display:none;'>
コード <span id="code"></span><br>
名称 <span id="namae"></span><br>
金額 <input id="kingaku" type="tel" size="6">
</div>
jq は、クリック( またはタップ )された jQuery の行(tr) オブジェクトです。この保存しておいた(25行)オブジェクトを使用して、入力したデータを行に戻しています(36行)。
|
|
【jQuery UIの最新記事】
- Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン
- jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する
- jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
- jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する
- jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法
- jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用
- jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする
- jQuery UI の slider と Google のホスティング
- jQuery UI の タブの表示切替でのアニメーション方法
