*

tableedit

公開日: : 最終更新日:2015/05/04 WEB

http://ginpen.com/2012/05/21/how-to-get-values-from-form-with-jquery/

<head>
<link rel="stylesheet" type="text/css" href="./style.css"
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
window.onerror = function(msg, url, line, col, error) {
    console.log(msg); // エラーの内容
};
$(document).ready(function() {

 $("td.edit").on("click",DoEdit);
 $("td.edit").css("color","red")
});
/*
ShowTable:データを読み込みテーブルで表示
DoEdit:編集モード開始
UpdateRecord:更新開始・更新部分を再取得
/**
 * 2013年12月の最終日を取得する。
 * (月は1月~12月を0~11で指定します)
var dt = new Date(2013, (12 - 1) + 1, 0);
javascriptでは「次月の0日目」が「当月の最終日」
*/

//レコード(行)を作成する
function htmlElementTr(arrayRecord){
  var classname = "classname";
  var htmlElement = "<tr>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"" + classname + "\"><ul><li class=\"input\">";
  htmlElement += "arrayRecord";
  htmlElement += "</li></ul></td>";
  htmlElement += "<td class=\"edit\">[EDIT]</td>";
  htmlElement += "<td class=\"update\">[UPLOAD]</td>";
  htmlElement += "<td class=\"back\">[back]</td>";
  htmlElement += "</tr>";
  return htmlElement;
}
//編集開始する
function DoEdit(){
//編集イベント:ON 更新イベント:OFF・戻る:OFF
//  ↓
//編集イベント:OFF 更新イベント:OFF・戻る:OFF
$("td.edit").off("click",DoEdit);
$("td.edit").css("color","black");

//編集できるようにINPUTタグなどを準備する
//クラスの名前を見てINPUTタグかTEXTAREAタグか決める
var jqObj = $(this).closest("tr");
$("td",jqObj).each(function(){
  if($(this).hasClass("tantoubu")){
    AppendChildTag($("ul>li",this),"input");

  }else if($(this).hasClass("shousai")){
    AppendChildTagSelect($("ul>li",this),"textarea");
    
  }else{
    AppendChildTag($("ul>li",this),"input");
    $("ul>li>input",this).prop("readonly",true);
    var litag = "<li class=\"select disnon\">sss</li><li class=\"select disnon\">gggg</li><li class=\"select disnon\">fff</li>";
    $("ul",this).append(litag);
    //INPUTがクリックされたら選択肢を表示するイベントを
    //ひも付けておく
    $("ul>li>input",this).on("click",ShowSelection);
    $("ul>li.select",this).on("click",InsertInputText);
  }
});
//編集ができるようになったので更新できるようにする
//編集イベント:OFF 更新イベント:OFF・戻る:OFF
//  ↓
//編集イベント:OFF 更新イベント:ON・戻る:ON
$("td.back",jqObj).on("click",BackToShowOnly);
$("td.update",jqObj).on("click",UpdateRecord);
$("td.update",jqObj).css("color","red");
$("td.update",jqObj).addClass("clickable");
}
//編集をやめる
function BackToShowOnly(){
  DoBackOrUpdate("back",$(this));
}

//編集した分をDBへ反映させる
function UpdateRecord(){
  DoBackOrUpdate("Update",$(this));
}
function DoBackOrUpdate(flg,jqObj){
  //イベント暴発しないようにする
  //更新イベントを実行不可にする
  //編集イベント:OFF 更新イベント:ON 戻る:ON
  //  ↓
  //編集イベント:OFF 更新イベント:OFF 戻る:OFF
  jqObj.off("click",BackToShowOnly);
  jqObj.off("click",UpdateRecord);
  jqObj.css("color","black");
  //更新開始
  var key = "";
  var inputvalue = "";
  var toPostArray = new Object();

  var jqObj = jqObj.closest("tr");
  var jqObjinput = $("td>ul>li>input",jqObj);
  jqObjinput.each(function(){
    key = $(this).closest("td").prop("class");
    $(this).prop("disabled",true);
    inputvalue = $(this).val();
    toPostArray[key] = inputvalue;
  });
  var url = "";
  //URLはCOMMONオブジェクトに入力したい
  if(flg == "Update"){
    url = "updateurl";
  }else if(flg == "back"){
    url = "backurl";
  }else{
    return;
  }
  //UPDATEしてSELECTで更新分のみのレコードを返すPHP書く
  //$.post('url',PostArray)
 //.done(function (data) { alert('成功: ' + data ); })
 //.fail(function () { alert('失敗: ' + arguments[2]); });
 //.always(function(arg1, status, arg2) {// 通信完了時の処理});
 //更新したレコードを再取得して表示する
 var htmlElementTds = $("td",htmlElementTr());

 jqObj.empty();
 jqObj.append(htmlElementTds);
 jqObj.css("background-color","red");
 //更新作業が終わったので編集イベントを実行可能にする
 //編集イベント:OFF 更新イベント:OFF 戻る:OFF
 //  ↓
 //編集イベント:ON 更新イベント:OFF 戻る:OFF
 $("td.edit").on("click",DoEdit);
 $("td.edit").css("color","red");
  
}
//選択して選ぶものは選択肢を提示する
function ShowSelection(){
  var jqObj = $(this).closest("td");
  jqObj.parent("tr").find("li.select").addClass("disnon");
  $("li.select",jqObj).removeClass("disnon");

}

//選択肢をクリックすると選択したテキストが入力される
function InsertInputText(){
  var str = $(this).text();
  var jqObj = $(this).closest("td");
  $("li",jqObj).filter(".input").children("input").val(str);
  $("li",jqObj).filter(".select").addClass("disnon");
}

//<td>テキスト</td>の構造になっているのを
//<td><input>テキスト</input></td>のように加工する
function AppendChildTag(jqObjLi,childtag){
  var jqObjHtmltag = jqObjLi.prop("tagName");
  var jqObjClassName = jqObjLi.attr("class");

  if(childtag == "input"){
    var htmltagb =
      "<" + childtag + " class=\"" + jqObjClassName + "\" type=\"text\" value=\"" + jqObjLi.text() + "\"></" + childtag + ">";

    jqObjLi.empty();
    jqObjLi.append(htmltagb );
  }else if(!childtag == "input"){
    jqObjLi.empty();
    jqObjLi.append("<" + childtag + ">" + jqObj.text() + "</" + childtag + ">");
  }
  
}

</script>
<section id="sample01">
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
</tr>
</thead><tbody>
<?php

include 'test_dbconnect1.php';
$sql = 'SELECT * FROM tbl01_name';
$stmt = $pdo->query($sql);
while($row = $stmt -> fetch(PDO::FETCH_NUM)) {
    print("<tr>");
    for ($i=0; $i < count($row); $i++){
    print("<td class=\"" . str_replace("-","",$row[$i]) ."\"><ul><li class=\"input\">");
    print($row[$i]);
    print("</li></ul></td>");
    }
    print("<td class=\"edit\">");
    print("[EDIT]");
    print("</td>");
    print("<td class=\"update\">");
    print("[UPLOAD]");
    print("</td>");
    print("<td class=\"back\">");
    print("[BACK]");
    print("</td>");
    print("</tr>");
}
?>

</tbody>
</table>
</section>


		<script type="text/javascript">
		
			$(function () {
				$("button").click(function(){
					$("li").filter(".test").css("background-color","#f99");
					console.log($("li").filter(".test").text());
				})
			});
			
		</script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>
		<ul>
			<li>list item A</li>
			<li>list item B</li>
			<li class="test">list item C</li>
			<li>list item D</li>
			<li>list item E</li>
		</ul>
		<button>CLICK</button>



</body>

admax_area



関連記事

no image

call

<?php $array[] = $_POST['name']; $array[] =

記事を読む

no image

default_body.php

<?php $sql = 'SELECT * FROM tbl01_name LIMIT

記事を読む

no image

sample.js

$.post('<?php print($url); ?>',object) .

記事を読む

no image

index1.php

<head> <link rel="stylesheet"

記事を読む

no image

p-list.php

<?php include 'variable_declaration.php'; i

記事を読む

no image

style.css

/* ---------------------------------------------

記事を読む

no image

main.php

<?php include 'script_load.php';//css、script

記事を読む

no image

main.php

<?php include 'script_load.php';//css、script

記事を読む

no image

content-header.php

<header class="global-header">

記事を読む

no image

script-load.php

<head> <link rel="stylesheet&qu

記事を読む

admax_area



Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

admax_area



PAGE TOP ↑