JavaScript/TypeScript – ページ 2

2017-03-06

PHP Javascript 在庫管理

以前作っていた在庫管理。お蔵入り版。
1つのファイルにHTML,CSS,JS,PHPを全て書き込んでいた。

<!DOCTYPE html>
<html lang="ja">
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<meta charset="UTF-8">
	<title>受注参照</title>
	<style>
	body{
		font-family: Meiryo, sans-serif;
		font-size: 12px;
	}
	#view_tb{
		border-collapse: collapse;
		font-size: 12px;
	}
	#view_tb td, #view_tb th{
		border: 1px dotted #ccc;
		white-space: nowrap;
		padding: 1px;
	}
	#view_tb tr:hover{
		background-color: #eef;	
	}
	#frm{
		margin-bottom: 10px;
		background-color: #eef;
	}
	#bk{
		display: none;	
	}
	#sav_tb td{
		text-align: right;
	}
	.yen{
		text-align: right;
	}
	.lnk{
		cursor: pointer;
		color: blue;
	}
	</style>
</head>
<body>
<a href="?view=受注一覧&offset=0" id="bk">戻る</a>
<div id="header">
<?php
require_once('config.php');
require_once('functions.php');
// 登録 //
if( $_GET['save'] == "登録"){
	$n = date("Y-m-d");
echo <<< HTML
<form method="POST">
	<table id="sav_tb">
	<tr><td>区分：</td><td><input type="text" value="新規" disabled></td></tr>
	<tr><td>型式：</td><td><input type="text"></td></tr>
	<tr><td>工番(数値)：</td><td><input type="text" value=0></td></tr>
	<tr><td>数量(数値)：</td><td><input type="text" value=0></td></tr>
	<tr><td>納期：</td><td><input type="text" value="$n"></td></tr>
	<tr><td>得意先：</td><td><input type="text"></td></tr>
	<tr><td>単価(数値)：</td><td><input type="text" value="0"></td></tr>
	<tr><td>金額(数値)：</td><td><input type="text" value="0" disabled></td></tr>
	<tr><td>本社備考1：</td><td><input type="text"></td></tr>
	<tr><td>本社備考2：</td><td><input type="text"></td></tr>
	<tr><td>納期確定：</td><td><input type="text"></td></tr>
	<tr><td>更新日：</td><td><input type="text" value="$n" disabled></td></tr>
	<tr><td>作成日：</td><td><input type="text" value="$n" disabled></td></tr>
	<tr>
		<td></td>
		<td><span class="lnk" id="sv">[登録]</span>&nbsp;&nbsp;&nbsp;<span class="lnk" id="abt">[中止]</span></td>
	</tr>
	</table>
</div><!-- header -->
</form>
<script>
$(function(){
	// 登録 //
	$(document).on('click', '#sv', function(){
		var kubun = $("#sav_tb tr:nth-child(1) input").val();
		var katashiki = $("#sav_tb tr:nth-child(2) input").val();
		var kouban = parseInt($("#sav_tb tr:nth-child(3) input").val());
		var suryo = parseInt($("#sav_tb tr:nth-child(4) input").val());
		var nouki = $("#sav_tb tr:nth-child(5) input").val();	
		var tokuisaki = $("#sav_tb tr:nth-child(6) input").val();
		var tanka = parseInt($("#sav_tb tr:nth-child(7) input").val());
		var kingaku = parseInt($("#sav_tb tr:nth-child(8) input").val());
		var honsyabikou1 = $("#sav_tb tr:nth-child(9) input").val();
		var honsyabikou2 = $("#sav_tb tr:nth-child(10) input").val();
		var noukikakutei = $("#sav_tb tr:nth-child(11) input").val();
		var koushinbi = $("#sav_tb tr:nth-child(12) input").val();
		var sakuseibi = $("#sav_tb tr:nth-child(13) input").val();
		// nouki //
		if (nouki != ""){
			nouki = nouki.replace(/\//g,"-");
			var d = new Date(nouki);
			var mth = d.getMonth() + 1;
			if( 1 <= mth && 12 >= mth && 10 > mth ){ 
				mth = '0' + mth;
			}else if( 1 <= mth && 12 >= mth ){
				mth = mth;
			}else{
				alert("納期を確認してください(YYYY-MM-DD)");
				return;
			}
			var day = d.getDate();
			if( 1 <= day && 31 >= day && 10 > day ){ 
				day = '0' + day;
			}else if( 1 <= day && 31 >= day ){
				day = day;
			}else{
				alert("納期を確認してください(YYYY-MM-DD)");
				return;
			}
			nouki = d.getFullYear() + "-" + mth + "-" + day;
			$("#sav_tb tr:nth-child(5) input").val(nouki);
		}
		// suryo tanka //
		if((!isNaN(suryo)) && (!isNaN(tanka))){
			kingaku = suryo * tanka;
			$("#sav_tb tr:nth-child(8) input").val(kingaku);
		}else{
			alert("数量と単価を確認してください");
			return;
		}
		// kouban //
		if(isNaN(kouban)){
			alert("工番を確認してください");
			return;
		}
		if(confirm('登録しますか？')){			
			$.post('_save.php',{
				kubun: kubun,
				katashiki: katashiki,
				kouban: kouban,
				suryo: suryo,
				nouki: nouki,
				tokuisaki: tokuisaki,
				tanka: tanka,
				kingaku: kingaku,
				honsyabikou1: honsyabikou1,
				honsyabikou2: honsyabikou2,
				noukikakutei: noukikakutei,
				koushinbi: koushinbi,
				sakuseibi: sakuseibi
			},function(){
				location.href="?view=受注一覧&offset=0";
			});			
		}
	});
	// 中止 //
	$(document).on('click', '#abt', function(){
		location.href="?view=受注一覧&offset=0";
	});
});
</script>
</body>	
</html>
HTML;
exit;	
}
// 受注一覧　在庫一覧 //
if( $_GET['view'] == "在庫一覧" ){
	echo $_GET['view'];
	$sql = "select * from order_tb where (入庫 is not null) and (出庫 is null)";
	$cntsql = "select count(*) from order_tb where (入庫 is not null) and (出庫 is null)";	

	if (array_key_exists('型',$_GET)){
		$sql = $sql . " and (型式 like '%" . $_GET['型'] . "%')";
		$cntsql = $cntsql . " and (型式 like '%" . $_GET['型'] . "%')";
	}
	if (array_key_exists('工',$_GET)){
		$sql = $sql . " and (工番 like '%" . $_GET['工'] . "%')";
		$cntsql = $cntsql . " and (工番 like '%" . $_GET['工'] . "%')";
	}
	if (array_key_exists('納',$_GET) && $_GET['納'] != ""){
		$sql = $sql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";
		$cntsql = $cntsql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";
	}
	if (array_key_exists('得',$_GET)){
		$sql = $sql . " and (得意先 like '%" . $_GET['得'] . "%')";	
		$cntsql = $cntsql . " and (得意先 like '%" . $_GET['得'] . "%')";	
	}
	if (array_key_exists('本',$_GET)){
		$sql = $sql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";
		$sql = $sql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";
		$cntsql = $cntsql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";	
		$cntsql = $cntsql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";
	}
	if (array_key_exists('更',$_GET) && $_GET['更'] != ""){
		$sql = $sql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";	
		$cntsql = $cntsql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";	
	}
	if (array_key_exists('作',$_GET) && $_GET['作'] != ""){
		$sql = $sql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";	
		$cntsql = $cntsql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";	
	}
	$sql = $sql . " limit " . $_GET['offset'] . ",100;";
	$cntsql = $cntsql . ";";
}elseif( $_GET['view'] == "受注一覧" ){
	echo $_GET['view'];
	$sql = "select * from order_tb where (id is not null)";
	$cntsql = "select count(*) from order_tb where (id is not null)";
	if (array_key_exists('型',$_GET)){
		$sql = $sql . " and (型式 like '%" . $_GET['型'] . "%')";
		$cntsql = $cntsql . " and (型式 like '%" . $_GET['型'] . "%')";
	}
	if (array_key_exists('工',$_GET)){
		$sql = $sql . " and (工番 like '%" . $_GET['工'] . "%')";
		$cntsql = $cntsql . " and (工番 like '%" . $_GET['工'] . "%')";
	}
	if (array_key_exists('納',$_GET) && $_GET['納'] != ""){
		$sql = $sql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";
		$cntsql = $cntsql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";
	}
	if (array_key_exists('得',$_GET)){
		$sql = $sql . " and (得意先 like '%" . $_GET['得'] . "%')";	
		$cntsql = $cntsql . " and (得意先 like '%" . $_GET['得'] . "%')";	
	}
	if (array_key_exists('本',$_GET)){
		$sql = $sql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";
		$sql = $sql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";
		$cntsql = $cntsql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";	
		$cntsql = $cntsql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";
	}
	if (array_key_exists('更',$_GET) && $_GET['更'] != ""){
		$sql = $sql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";	
		$cntsql = $cntsql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";	
	}
	if (array_key_exists('作',$_GET) && $_GET['作'] != ""){
		$sql = $sql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";	
		$cntsql = $cntsql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";	
	}
	$sql = $sql . " limit " . $_GET['offset'] . ",100;";
	$cntsql = $cntsql . ";";
}else{
echo <<< HTML
<a href="?view=受注一覧&offset=0">受注一覧(入出庫管理)</a>
</div><!--header-->
</body>
</html>
HTML;
exit;
}
$db = con();
$rows = array();
$s = $db->query($cntsql);
if (array_key_exists('型',$_GET)){ echo "(検索結果)"; }
$cnt = $s->fetchColumn();
echo " " .$cnt . "件取得しました";
foreach($db->query($sql) as $row){
	array_push($rows, $row);
}
?>
<form method="GET" id="frm">
	<input type="submit" value="受注一覧" name="view">
	<input type="submit" value="在庫一覧" name="view">
	<input type="hidden" value="0" name="offset">
	<?php if($_GET['offset'] > 0 && array_key_exists('型', $_GET)): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] - 100; ?>
		&型=<?php echo $_GET['型']; ?>
		&工=<?php echo $_GET['工']; ?>
		&納=<?php echo $_GET['納']; ?>
		&得=<?php echo $_GET['得']; ?>
		&本=<?php echo $_GET['本']; ?>
		&更=<?php echo $_GET['更']; ?>
		&作=<?php echo $_GET['作']; ?>		
		">前へ</a>
	<?php elseif($_GET['offset'] > 0): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] - 100; ?>">前へ</a>		
	<?php else: ?>
		前へ
	<?php endif; ?>
	<?php if($_GET['offset'] + 100 < $cnt  && array_key_exists('型', $_GET)): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] + 100; ?>
		&型=<?php echo $_GET['型']; ?>
		&工=<?php echo $_GET['工']; ?>
		&納=<?php echo $_GET['納']; ?>
		&得=<?php echo $_GET['得']; ?>
		&本=<?php echo $_GET['本']; ?>
		&更=<?php echo $_GET['更']; ?>
		&作=<?php echo $_GET['作']; ?>	
		">次へ</a>
	<?php elseif($_GET['offset'] + 100 < $cnt): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] + 100; ?>">次へ</a>
	<?php else: ?>
		次へ
	<?php endif; ?>
	<?php if($_GET['offset'] < (($cnt-1) - (($cnt-1) % 100)) && array_key_exists('型', $_GET)): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo ($cnt-1) - (($cnt-1) % 100); ?>
		&型=<?php echo $_GET['型']; ?>
		&工=<?php echo $_GET['工']; ?>
		&納=<?php echo $_GET['納']; ?>
		&得=<?php echo $_GET['得']; ?>
		&本=<?php echo $_GET['本']; ?>
		&更=<?php echo $_GET['更']; ?>
		&作=<?php echo $_GET['作']; ?>	
		">最後へ</a>
	<?php elseif($_GET['offset'] < (($cnt-1) - (($cnt-1) % 100))): ?>
		<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo ($cnt-1) - (($cnt-1) % 100); ?>">最後へ</a>
	<?php else: ?>
		最後へ
	<?php endif; ?>
	(<?php echo $_GET['offset'] + 1; ?>から<?php echo $_GET['offset'] + 100; ?>まで)
</form>	
<form method="GET" id="frm">
	<input type="submit" value="登録" name="save">
	<input type="button" id="csv" value="書出">
</form>
<form method="GET" id="frm">
	型:<input type="text" value="<?php echo $_GET['型']; ?>" size="8" name="型">
	　工:<input type="text" value="<?php echo $_GET['工']; ?>" size="8" name="工">
	　納:<input type="text" value="<?php echo $_GET['納']; ?>" size="8" name="納" id="n">
	　得:<input type="text" value="<?php echo $_GET['得']; ?>" size="8" name="得">
	　本:<input type="text" value="<?php echo $_GET['本']; ?>" size="8" name="本">
	　更:<input type="text" value="<?php echo $_GET['更']; ?>" size="8" name="更">
	　作:<input type="text" value="<?php echo $_GET['作']; ?>" size="8" name="作">
	<input type="hidden" value="<?php echo $_GET['view']; ?>" name="view">
	<input type="hidden" value="0" name="offset">
	<input type="submit" value="取得">：
</form>	
</div><!-- header -->
<div id="view">
<table id="view_tb">
	<tr>
		<th>区分</th>
		<th>型式</th>
		<th>工番</th>
		<th>数量</th>
		<th>納期</th>
		<th>得意先</th>
		<th>単価</th>
		<th>金額</th>	
		<th>本社備考1</th>
		<th>本社備考2</th>
		<th>納期確定</th>
		<th>更新日</th>	
		<th>作成日</th>
		<th>入庫</th>
		<th>出庫</th>
		<th>入庫</th>
		<th>出庫</th>
		<th>入消</th>
		<th>出消</th>
		<th></th>
		<th>分割</th>
		<th>回数</th>	
		<th>削除</th>
	</tr>
	<?php for($i = 0, $total = 0; $i < count($rows); $i++ ): ?>
	<tr id="r_<?php echo $rows[$i][0]; ?>" data-id="<?php echo $rows[$i][0]; ?>">
		<td><?php echo $rows[$i][2]; ?></td>
		<td><?php echo $rows[$i][4]; ?></td>
		<td><?php echo $rows[$i][5]; ?></td>
		<td><?php echo $rows[$i][9]; ?></td>
		<td><?php echo $rows[$i][10]; ?></td>
		<td><?php echo $rows[$i][15]; ?></td>
		<td class="lnk yen" id="plice"><?php echo $rows[$i][16]; ?></td>
		<td class="yen"><?php echo $rows[$i][17]; ?></td>
		<td><?php echo $rows[$i][18]; ?></td>
		<td><?php echo $rows[$i][19]; ?></td>
		<td><?php echo $rows[$i][20]; ?></td>
		<td><?php echo $rows[$i][22]; ?></td>
		<td><?php echo $rows[$i][23]; ?></td>
		<td><?php echo $rows[$i][24]; ?></td>
		<td><?php echo $rows[$i][25]; ?></td>
		<td class="lnk" id="rcv">[入庫]</td>
		<td class="lnk" id="shp">[出庫]</td>
		<td class="lnk" id="d_rcv">[入消]</td>
		<td class="lnk" id="d_shp">[出消]</td>	
		<td><input id="inp" type="text" size="1"></td>
		<td class="lnk" id="sp">[分割]</td>
		<td><?php echo $rows[$i][26]; ?></td>		
		<td class="lnk" id="del">[削除]</td>
	</tr>
	<?php $total = $total + $rows[$i][17]; ?>
	<?php endfor; ?>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td class="yen"><?php echo number_format($total); ?></td>	
		<td></td>
		<td></td>
		<td></td>
		<td></td>	
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>	
		<td></td>
	</tr>
</table>
</div><!--view-->	
<script>
$(function(){
	// 削除 //
	$(document).on('click', '#del', function(){
		if(confirm('削除しますか？')){
			var id = $(this).parent().data('id');
			$.post('_delete.php',{id: id},function(){
				$('#r_' + id).fadeOut(300);
				location.reload();
			});
		}
	});
	// 入庫 //
	$(document).on('click', '#rcv', function(){
		if(confirm('入庫しますか？')){
			var id = $(this).parent().data('id');
			$.post('_rcv.php',{id: id},function(rs){
				$('#r_' + id + " > td:nth-child(14)").text(rs);
			});
		}
	});
	// 出庫 //
	$(document).on('click', '#shp', function(){
		if(confirm('出庫しますか？')){
			var id = $(this).parent().data('id');
			$.post('_shp.php',{id: id},function(rs){
				$('#r_' + id + " > td:nth-child(15)").text(rs);
			});
		}
	});
	// 入消 //
	$(document).on('click', '#d_rcv', function(){
		if(confirm('入庫を取消しますか？')){
			var id = $(this).parent().data('id');
			$.post('_d_rcv.php',{id: id},function(){
				$('#r_' + id + " > td:nth-child(14)").text("");
			});
		}
	});
	// 出消 //
	$(document).on('click', '#d_shp', function(){
		if(confirm('出庫を取消しますか？')){
			var id = $(this).parent().data('id');
			$.post('_d_shp.php',{id: id},function(){
				$('#r_' + id + " > td:nth-child(15)").text("");
			});
		}
	});
	// 分割 //
	$(document).on('click', '#sp', function(){
		var id = $(this).parent().data('id');
		var num = parseInt($('#r_' + id + " > td:nth-child(4)").text());
		var plice = parseInt($('#r_' + id + " > td:nth-child(7)").text());
		var p_num = parseInt($('#r_' + id + ' input').val());
		if(!isNaN(p_num) && num > p_num && p_num > 0){
			if(confirm('受注数 ' + num + ' から ' + p_num + ' を別の行に複製します')){
				num = num - p_num;
				$.post('_pull_num.php',{id: id, num: num, p_num: p_num, plice: plice},function(){
					$('#r_' + id).fadeOut(300,function(){
						location.reload();
					});
				});
			}
		}
	});
	// 単価 //
	$(document).on('click', '#plice',function(){
		var id = $(this).parent().data('id');
		var num = parseInt($('#r_' + id + " > td:nth-child(4)").text());
		var plice = parseInt(prompt("単価を入力してください"));
		if(!isNaN(plice) && !isNaN(plice * num)){
			$.post('_plice.php',{id: id, num: num, plice: plice},function(){
				$('#r_' + id + " > td:nth-child(7)").text(plice);
				$('#r_' + id + " > td:nth-child(8)").text(plice * num);
				location.reload();
			});
		}
	});
	// 書出 //
	var flg = true;
	$(document).on('click', '#csv',function(){
		if(flg){
			flg = false;
			$("#view_tb th:nth-child(n+16):nth-child(-n+21), td:nth-child(n+16):nth-child(-n+21)").remove();
			$("#view_tb th:nth-last-child(1), td:nth-last-child(1)").remove();
			$("#header").css("display","none");
			$("#bk").css("display","inline");
		}
	});
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

<!DOCTYPE html>

<head>

<style>

body{

font-family: Meiryo, sans-serif;

font-size: 12px;

}

#view_tb{

border-collapse: collapse;

font-size: 12px;

}

#view_tb td, #view_tb th{

border: 1px dotted #ccc;

white-space: nowrap;

padding: 1px;

}

#view_tb tr:hover{

background-color: #eef;

}

#frm{

margin-bottom: 10px;

background-color: #eef;

}

#bk{

display: none;

}

#sav_tb td{

text-align: right;

}

.yen{

text-align: right;

}

.lnk{

cursor: pointer;

color: blue;

}

</style>

</head>

<body>

<?php

require_once('config.php');

require_once('functions.php');

// 登録 //

if( $_GET['save'] == "登録"){

$n = date("Y-m-d");

echo <<< HTML

<tr>

</tr>

</table>

</div>

</form>

$(function(){

// 登録 //

$(document).on('click', '#sv', function(){

var kubun = $("#sav_tb tr:nth-child(1) input").val();

var katashiki = $("#sav_tb tr:nth-child(2) input").val();

var kouban = parseInt($("#sav_tb tr:nth-child(3) input").val());

var suryo = parseInt($("#sav_tb tr:nth-child(4) input").val());

var nouki = $("#sav_tb tr:nth-child(5) input").val();

var tokuisaki = $("#sav_tb tr:nth-child(6) input").val();

var tanka = parseInt($("#sav_tb tr:nth-child(7) input").val());

var kingaku = parseInt($("#sav_tb tr:nth-child(8) input").val());

var honsyabikou1 = $("#sav_tb tr:nth-child(9) input").val();

var honsyabikou2 = $("#sav_tb tr:nth-child(10) input").val();

var noukikakutei = $("#sav_tb tr:nth-child(11) input").val();

var koushinbi = $("#sav_tb tr:nth-child(12) input").val();

var sakuseibi = $("#sav_tb tr:nth-child(13) input").val();

// nouki //

if (nouki != ""){

nouki = nouki.replace(/\//g,"-");

var d = new Date(nouki);

var mth = d.getMonth() + 1;

if( 1 <= mth && 12 >= mth && 10 > mth ){

mth = '0' + mth;

}else if( 1 <= mth && 12 >= mth ){

mth = mth;

}else{

alert("納期を確認してください(YYYY-MM-DD)");

return;

}

var day = d.getDate();

if( 1 <= day && 31 >= day && 10 > day ){

day = '0' + day;

}else if( 1 <= day && 31 >= day ){

day = day;

}else{

alert("納期を確認してください(YYYY-MM-DD)");

return;

}

nouki = d.getFullYear() + "-" + mth + "-" + day;

$("#sav_tb tr:nth-child(5) input").val(nouki);

}

// suryo tanka //

if((!isNaN(suryo)) && (!isNaN(tanka))){

kingaku = suryo * tanka;

$("#sav_tb tr:nth-child(8) input").val(kingaku);

}else{

alert("数量と単価を確認してください");

return;

}

// kouban //

if(isNaN(kouban)){

alert("工番を確認してください");

return;

}

if(confirm('登録しますか？')){

$.post('_save.php',{

kubun: kubun,

katashiki: katashiki,

kouban: kouban,

suryo: suryo,

nouki: nouki,

tokuisaki: tokuisaki,

tanka: tanka,

kingaku: kingaku,

honsyabikou1: honsyabikou1,

honsyabikou2: honsyabikou2,

noukikakutei: noukikakutei,

koushinbi: koushinbi,

sakuseibi: sakuseibi

},function(){

location.href="?view=受注一覧&offset=0";

});

}

});

// 中止 //

$(document).on('click', '#abt', function(){

location.href="?view=受注一覧&offset=0";

});

</script>

</body>

</html>

HTML;

exit;

}

// 受注一覧　在庫一覧 //

if( $_GET['view'] == "在庫一覧" ){

echo $_GET['view'];

$sql = "select * from order_tb where (入庫 is not null) and (出庫 is null)";

$cntsql = "select count(*) from order_tb where (入庫 is not null) and (出庫 is null)";

if (array_key_exists('型',$_GET)){

$sql = $sql . " and (型式 like '%" . $_GET['型'] . "%')";

$cntsql = $cntsql . " and (型式 like '%" . $_GET['型'] . "%')";

}

if (array_key_exists('工',$_GET)){

$sql = $sql . " and (工番 like '%" . $_GET['工'] . "%')";

$cntsql = $cntsql . " and (工番 like '%" . $_GET['工'] . "%')";

}

if (array_key_exists('納',$_GET) && $_GET['納'] != ""){

$sql = $sql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";

$cntsql = $cntsql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";

}

if (array_key_exists('得',$_GET)){

$sql = $sql . " and (得意先 like '%" . $_GET['得'] . "%')";

$cntsql = $cntsql . " and (得意先 like '%" . $_GET['得'] . "%')";

}

if (array_key_exists('本',$_GET)){

$sql = $sql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";

$sql = $sql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";

$cntsql = $cntsql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";

$cntsql = $cntsql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";

}

if (array_key_exists('更',$_GET) && $_GET['更'] != ""){

$sql = $sql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";

$cntsql = $cntsql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";

}

if (array_key_exists('作',$_GET) && $_GET['作'] != ""){

$sql = $sql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";

$cntsql = $cntsql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";

}

$sql = $sql . " limit " . $_GET['offset'] . ",100;";

$cntsql = $cntsql . ";";

}elseif( $_GET['view'] == "受注一覧" ){

echo $_GET['view'];

$sql = "select * from order_tb where (id is not null)";

$cntsql = "select count(*) from order_tb where (id is not null)";

if (array_key_exists('型',$_GET)){

$sql = $sql . " and (型式 like '%" . $_GET['型'] . "%')";

$cntsql = $cntsql . " and (型式 like '%" . $_GET['型'] . "%')";

}

if (array_key_exists('工',$_GET)){

$sql = $sql . " and (工番 like '%" . $_GET['工'] . "%')";

$cntsql = $cntsql . " and (工番 like '%" . $_GET['工'] . "%')";

}

if (array_key_exists('納',$_GET) && $_GET['納'] != ""){

$sql = $sql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";

$cntsql = $cntsql . " and (納期 like '%" . date("Y-m-d", strtotime($_GET['納'])) . "%')";

}

if (array_key_exists('得',$_GET)){

$sql = $sql . " and (得意先 like '%" . $_GET['得'] . "%')";

$cntsql = $cntsql . " and (得意先 like '%" . $_GET['得'] . "%')";

}

if (array_key_exists('本',$_GET)){

$sql = $sql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";

$sql = $sql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";

$cntsql = $cntsql . " and ((本社備考1 like '%" . $_GET['本'] . "%')";

$cntsql = $cntsql . " or (本社備考2 like '%" . $_GET['本'] . "%'))";

}

if (array_key_exists('更',$_GET) && $_GET['更'] != ""){

$sql = $sql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";

$cntsql = $cntsql . " and (更新日 like '%" . date("Y-m-d", strtotime($_GET['更'])) . "%')";

}

if (array_key_exists('作',$_GET) && $_GET['作'] != ""){

$sql = $sql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";

$cntsql = $cntsql . " and (作成日 like '%" . date("Y-m-d", strtotime($_GET['作'])) . "%')";

}

$sql = $sql . " limit " . $_GET['offset'] . ",100;";

$cntsql = $cntsql . ";";

}else{

echo <<< HTML

<a href="?view=受注一覧&offset=0">受注一覧(入出庫管理)</a>

</div>

</body>

</html>

HTML;

exit;

}

$db = con();

$rows = array();

$s = $db->query($cntsql);

if (array_key_exists('型',$_GET)){ echo "(検索結果)"; }

$cnt = $s->fetchColumn();

echo " " .$cnt . "件取得しました";

foreach($db->query($sql) as $row){

array_push($rows, $row);

}

<?php if($_GET['offset'] > 0 && array_key_exists('型', $_GET)): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] - 100; ?>

&型=<?php echo $_GET['型']; ?>

&工=<?php echo $_GET['工']; ?>

&納=<?php echo $_GET['納']; ?>

&得=<?php echo $_GET['得']; ?>

&本=<?php echo $_GET['本']; ?>

&更=<?php echo $_GET['更']; ?>

&作=<?php echo $_GET['作']; ?>

">前へ</a>

<?php elseif($_GET['offset'] > 0): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] - 100; ?>">前へ</a>

<?php else: ?>

<?php endif; ?>

<?php if($_GET['offset'] + 100 < $cnt && array_key_exists('型', $_GET)): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] + 100; ?>

&型=<?php echo $_GET['型']; ?>

&工=<?php echo $_GET['工']; ?>

&納=<?php echo $_GET['納']; ?>

&得=<?php echo $_GET['得']; ?>

&本=<?php echo $_GET['本']; ?>

&更=<?php echo $_GET['更']; ?>

&作=<?php echo $_GET['作']; ?>

">次へ</a>

<?php elseif($_GET['offset'] + 100 < $cnt): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo $_GET['offset'] + 100; ?>">次へ</a>

<?php else: ?>

<?php endif; ?>

<?php if($_GET['offset'] < (($cnt-1) - (($cnt-1) % 100)) && array_key_exists('型', $_GET)): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo ($cnt-1) - (($cnt-1) % 100); ?>

&型=<?php echo $_GET['型']; ?>

&工=<?php echo $_GET['工']; ?>

&納=<?php echo $_GET['納']; ?>

&得=<?php echo $_GET['得']; ?>

&本=<?php echo $_GET['本']; ?>

&更=<?php echo $_GET['更']; ?>

&作=<?php echo $_GET['作']; ?>

">最後へ</a>

<?php elseif($_GET['offset'] < (($cnt-1) - (($cnt-1) % 100))): ?>

<a href="?view=<?php echo $_GET['view']; ?>&offset=<?php echo ($cnt-1) - (($cnt-1) % 100); ?>">最後へ</a>

<?php else: ?>

最後へ

<?php endif; ?>

(<?php echo $_GET['offset'] + 1; ?>から<?php echo $_GET['offset'] + 100; ?>まで)

</form>

</form>

型:<input type="text" value="<?php echo $_GET['型']; ?>" size="8" name="型">

　工:<input type="text" value="<?php echo $_GET['工']; ?>" size="8" name="工">

　納:<input type="text" value="<?php echo $_GET['納']; ?>" size="8" name="納" id="n">

　得:<input type="text" value="<?php echo $_GET['得']; ?>" size="8" name="得">

　本:<input type="text" value="<?php echo $_GET['本']; ?>" size="8" name="本">

　更:<input type="text" value="<?php echo $_GET['更']; ?>" size="8" name="更">

　作:<input type="text" value="<?php echo $_GET['作']; ?>" size="8" name="作">

<input type="submit" value="取得">：

</form>

</div>

<tr>

</tr>

<?php for($i = 0, $total = 0; $i < count($rows); $i++ ): ?>

</tr>

<?php $total = $total + $rows[$i][17]; ?>

<?php endfor; ?>

<tr>

</tr>

</table>

</div>

$(function(){

// 削除 //

$(document).on('click', '#del', function(){

if(confirm('削除しますか？')){

var id = $(this).parent().data('id');

$.post('_delete.php',{id: id},function(){

$('#r_' + id).fadeOut(300);

location.reload();

});

}

});

// 入庫 //

$(document).on('click', '#rcv', function(){

if(confirm('入庫しますか？')){

var id = $(this).parent().data('id');

$.post('_rcv.php',{id: id},function(rs){

$('#r_' + id + " > td:nth-child(14)").text(rs);

});

}

});

// 出庫 //

$(document).on('click', '#shp', function(){

if(confirm('出庫しますか？')){

var id = $(this).parent().data('id');

$.post('_shp.php',{id: id},function(rs){

$('#r_' + id + " > td:nth-child(15)").text(rs);

});

}

});

// 入消 //

$(document).on('click', '#d_rcv', function(){

if(confirm('入庫を取消しますか？')){

var id = $(this).parent().data('id');

$.post('_d_rcv.php',{id: id},function(){

$('#r_' + id + " > td:nth-child(14)").text("");

});

}

});

// 出消 //

$(document).on('click', '#d_shp', function(){

if(confirm('出庫を取消しますか？')){

var id = $(this).parent().data('id');

$.post('_d_shp.php',{id: id},function(){

$('#r_' + id + " > td:nth-child(15)").text("");

});

}

});

// 分割 //

$(document).on('click', '#sp', function(){

var id = $(this).parent().data('id');

var num = parseInt($('#r_' + id + " > td:nth-child(4)").text());

var plice = parseInt($('#r_' + id + " > td:nth-child(7)").text());

var p_num = parseInt($('#r_' + id + ' input').val());

if(!isNaN(p_num) && num > p_num && p_num > 0){

if(confirm('受注数 ' + num + ' から ' + p_num + ' を別の行に複製します')){

num = num - p_num;

$.post('_pull_num.php',{id: id, num: num, p_num: p_num, plice: plice},function(){

$('#r_' + id).fadeOut(300,function(){

location.reload();

});

}

});

// 単価 //

$(document).on('click', '#plice',function(){

var id = $(this).parent().data('id');

var num = parseInt($('#r_' + id + " > td:nth-child(4)").text());

var plice = parseInt(prompt("単価を入力してください"));

if(!isNaN(plice) && !isNaN(plice * num)){

$.post('_plice.php',{id: id, num: num, plice: plice},function(){

$('#r_' + id + " > td:nth-child(7)").text(plice);

$('#r_' + id + " > td:nth-child(8)").text(plice * num);

location.reload();

});

}

});

// 書出 //

var flg = true;

$(document).on('click', '#csv',function(){

if(flg){

flg = false;

$("#view_tb th:nth-child(n+16):nth-child(-n+21), td:nth-child(n+16):nth-child(-n+21)").remove();

$("#view_tb th:nth-last-child(1), td:nth-last-child(1)").remove();

$("#header").css("display","none");

$("#bk").css("display","inline");

}

});

</script>

</body>

</html>

2017-01-112017-01-17

ds.min.js

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
  background: #222;
  min-width: 960px;
}

rect {
  fill: none;
  pointer-events: all;
}

circle {
  fill: none;
  stroke-width: 2.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>window.d3 || document.write('<script src="d3.min.js"><\/script>')</script>
<script>

var width = Math.max(960, innerWidth),
    height = Math.max(500, innerHeight);

var i = 0;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

function particle() {
  var m = d3.mouse(this);

  svg.insert("circle", "rect")
      .attr("cx", m[0])
      .attr("cy", m[1])
      .attr("r", 1e-6)
      .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
      .style("stroke-opacity", 1)
    .transition()
      .duration(2000)
      .ease(Math.sqrt)
      .attr("r", 100)
      .style("stroke-opacity", 1e-6)
      .remove();

  d3.event.preventDefault();
}

</script>

<!DOCTYPE html>

<style>

body {

margin: 0;

background: #222;

min-width: 960px;

}

rect {

fill: none;

pointer-events: all;

}

circle {

fill: none;

stroke-width: 2.5px;

}

</style>

<body>

var width = Math.max(960, innerWidth),

height = Math.max(500, innerHeight);

var i = 0;

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

svg.append("rect")

.attr("width", width)

.attr("height", height)

.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

function particle() {

var m = d3.mouse(this);

svg.insert("circle", "rect")

.attr("cx", m[0])

.attr("cy", m[1])

.attr("r", 1e-6)

.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))

.style("stroke-opacity", 1)

.transition()

.duration(2000)

.ease(Math.sqrt)

.attr("r", 100)

.style("stroke-opacity", 1e-6)

.remove();

d3.event.preventDefault();

}

</script>

2016-09-302016-12-23

JavascriptでPOST基本

$("button#update").click(function() {

    // 多重送信を防ぐため通信完了までボタンをdisableにする
    var button = $(this);
    button.attr("disabled", true);

    // 各フィールドから値を取得してJSONデータを作成
    var data = {
        name: $("#name").val(),
        age: parseInt($("#age").val())
    };

    // 通信実行
    $.ajax({

        type:"post",                     // method = "POST"
        url:"/path/to/post",             // POST送信先のURL
        data:JSON.stringify(data),       // JSONデータ本体
        contentType: 'application/json', // リクエストの Content-Type
        dataType: "json",                // レスポンスをJSONとしてパースする
        success: function(json_data) {   // 200 OK時

            // JSON Arrayの先頭が成功フラグ、失敗の場合2番目がエラーメッセージ

            if (!json_data[0]) {    // サーバが失敗を返した場合
                alert("Transaction error. " + json_data[1]);
                return;
            }

            // 成功時処理
            location.reload();

        },
        error: function() {                  // HTTPエラー時
            alert("Server Error. Pleasy try again later.");
        },
        complete: function() {               // 成功・失敗に関わらず通信が終了した際の処理
            button.attr("disabled", false);  // ボタンを再び enableにする
        }
    });
});

$("button#update").click(function() {

// 多重送信を防ぐため通信完了までボタンをdisableにする

var button = $(this);

button.attr("disabled", true);

// 各フィールドから値を取得してJSONデータを作成

var data = {

name: $("#name").val(),

age: parseInt($("#age").val())

};

// 通信実行

$.ajax({

type:"post", // method = "POST"

url:"/path/to/post", // POST送信先のURL

data:JSON.stringify(data), // JSONデータ本体

contentType: 'application/json', // リクエストの Content-Type

dataType: "json", // レスポンスをJSONとしてパースする

success: function(json_data) { // 200 OK時

// JSON Arrayの先頭が成功フラグ、失敗の場合2番目がエラーメッセージ

if (!json_data[0]) { // サーバが失敗を返した場合

alert("Transaction error. " + json_data[1]);

return;

}

// 成功時処理

location.reload();

error: function() { // HTTPエラー時

alert("Server Error. Pleasy try again later.");

complete: function() { // 成功・失敗に関わらず通信が終了した際の処理

button.attr("disabled", false); // ボタンを再び enableにする

}

});

受け取り側

<?php

$json_string = file_get_contents('php://input');
echo $json_string;
$obj = json_decode($json_string);
var_dump($obj);

<?php

$json_string = file_get_contents('php://input');

echo $json_string;

$obj = json_decode($json_string);

var_dump($obj);

2016-09-292016-12-23

XMLHttpRequest.send ()でのパラメータについて

主にVBAでの利用。自作の関数で半角を全角に変更して渡す。

URLエンコードされているので+はスペースになった。 +は要エンコ
&はパラメータの区切りがずれてしまう。&は要エンコ
空白は問題なかった。一応エンコ
=も平気みたい。恐らく&以降最初の=でkeyとvalueを結んでいるっぽい。一応エンコ
色々なサイトにある記述してはいけない記号類も上記以外は問題なく入った。
%は単独なら問題ない。エクセルが%を計算式と認識している場合や、%といくつかの数字が連続すると登録されない場合がある。計算式はそのまま渡さない。

2016-09-292020-05-06

JSONメモ

正しいコンテンツタイプ
header(“Content-Type: application/json; charset=utf-8”);

ただ、ダウンロードされてしまうので、開発時以下。
header(“Content-Type: text/javascript; charset=utf-8”);

拡張子は *.json
データ型は6つある。
キーはダブルクォーテーション囲い、キーと値は:(コロン)で区切る。

文字列(2重引用符)
数値(10進数のみ)
true/false
null
オブジェクト {“key”: “value”}
配列 [1,2,3,”A”,”B”,”C”]

2016-09-282016-12-23

Javascript punycode.jsを使う

日本語ドメインを使う場合、たまに必要になる。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"></head>
<script src="punycode.js"></script>
<script>

!function(){

//http://punycode.jp/ とは違う英数字がでる。アクセス解析で出ている値はこのURLと同じでJSのライブラリとは違う。
//JSのライブラリでxserverからの英数字をデコードしても文字化けする。

var e = Punycode.encode("テスト");
alert(e + "\n" + Punycode.decode(e));

}();

</script>

<!DOCTYPE html>

!function(){

//http://punycode.jp/ とは違う英数字がでる。アクセス解析で出ている値はこのURLと同じでJSのライブラリとは違う。

//JSのライブラリでxserverからの英数字をデコードしても文字化けする。

var e = Punycode.encode("テスト");

alert(e + "\n" + Punycode.decode(e));

}();

</script>

2016-09-272016-12-23

Javascript マウスでセル(テーブル)を塗る

レンサバ等でPHPファイルを作って以下を貼付ければ実行可能。
データはSQLiteに保存される。

<?php

ini_set("display_errors", "1");
ini_set("error_reporting", E_ALL);

$data = file_get_contents("php://input");
if (strlen($data) > 0){
    
    //$data_array = json_decode($data, true);
    //file_put_contents("log.txt", "value:" . $data_array["rc001001"]["value"] . ", css:" . $data_array["rc001001"]["css"]);

    //file_put_contents("log.txt",$data);
    
    if(file_exists("db.sql")){
        if ($db = sqlite_open("db.sql", 0666, $e)) {
            sqlite_query($db, "DROP TABLE tbl");
            sqlite_query($db, "CREATE TABLE tbl (col)");
            sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");
        } else {
            die($e);
        }     
    }else{
        if ($db = sqlite_open("db.sql", 0666, $e)) {
            sqlite_query($db, "CREATE TABLE tbl (col)");
            sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");
        } else {
            die($e);
        }   
    }

    //header("Content-Type: text/javascript; charset=utf-8");
    //echo $data;
    
    //$result = sqlite_query($db, "SELECT col FROM tbl");
    //var_dump(sqlite_fetch_array($result));
    
    exit();  
}

?>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0;
        }
        body, input[type="button"]{
            font-size: 11px; font-family: "メイリオ";
        }
        input[type="button"]{
            width: 100px;
            margin: 5px 0 5px 5px;
        }
        #screen{
            width: 100%; height: 100%;
            background-color: blue; opacity: 0.1;
            position: absolute; z-index: 1;
        }
        #container{
            width: 90%; height: 90%;
            overflow: scroll; -webkit-overflow-scrolling: touch;
        }
        table{
            border-collapse: collapse;
        }
        td{
            border: 1px solid #ccc;
            cursor: pointer;
            min-width: 15px; height: 15px;
        }

    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="screen"></div>
<div><input type="button" id="s" value="save"><input type="button" id="c" value="cancel"></div>
<div id="container">
    <table>
    <?php
    for($r = 1; $r <= 30; $r++){
        echo "<tr>";
        for($c = 1; $c <= 30; $c++){
            echo '<td class="r' . str_pad($r,3,0,STR_PAD_LEFT) . ' ' . 'c' . str_pad($c,3,0,STR_PAD_LEFT) . '" ';
            echo 'id="' . 'rc' . str_pad($r,3,0,STR_PAD_LEFT) . str_pad($c,3,0,STR_PAD_LEFT) . '">';
            echo '';
            echo '</td>';
        }
        echo "</tr>";
    }
    ?>
    </table>
    <p>
        ctrlを押しながらマウスを動かすと書ける。shiftを押しながらマウスを動かすと消せる。<br>
        セルをクリックするとテキスト入力できる。enterかescかフォーカスを抜くと確定(キャンセル処理はなし)。
    </p>
</div>

<script>

$("input#s").on("click",function(){
    
    $("input#s, input#c").attr("disabled","");
    
    var data = {};
    var id;
    
    for(var r = 1; r <= 30; r++){
        for(var c = 1; c <= 30; c++){
            id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";
            data[id] = {
                "value": $("#" + id + "").text(),
                "css": $("#" + id + "").css("background-color")
            };
        }
    }
    //contentType: "application/json", dataType: "json", data: JSON.stringify(data),
    $.ajax({
        type: "post", url: "", async: true, dataType: "text", data: JSON.stringify(data),   
        success: function(data){
            //console.log(data);
            alert("OK");
            $("input#s, input#c").attr("disabled", false);
            
            window.location.reload();
            
        },error: function(){
            alert("NG");
            $("input#s, input#c").attr("disabled", false);
        }
    });
    
});

$("input#c").on("click",function(){
    window.location.reload();
});

$("td").on("mousemove",function(i){
    if (i.ctrlKey) {
        $(this).css("background-color","#ccc");
    } else if (i.shiftKey) {
        $(this).css("background-color","white");
    }
});

$("td").on("click", function(i){
    $("<input></input>",{
        "type": "text",
        "value": $(i.target).text(),
        "css": {
            "position": "absolute", "z-index": "1",
            "top": i.pageY, "left": i.pageX
        }
    }).on("keydown", function(k){
            if (k.keyCode === 13 || k.keyCode === 27) {
                $(i.target).text( $(this).val() );
                $(this).remove();
            }
    }).appendTo("body").focus().blur(function(){
        $(i.target).text( $(this).val() );
        $(this).remove();    
    });
});

$(window).on("load",function(){
    $("#screen").hide();
});

</script>
<?php
if(file_exists("db.sql")){
    if ($db = sqlite_open("db.sql", 0666, $e)) {
        $row = sqlite_fetch_array(sqlite_query($db, "SELECT col FROM tbl"));
        echo "<script>";
        echo "var result = $row[0];";
        echo "</script><script>";
        
        echo 'for(var r = 1; r <= 30; r++){
                for(var c = 1; c <= 30; c++){
                    var id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";
                    $("#" + id + "").css("background-color", result[id].css);
                    $("#" + id + "").text(result[id].value);             
                }
        }';
        echo "</script>";
    }  
}
?>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

<?php

ini_set("display_errors", "1");

ini_set("error_reporting", E_ALL);

$data = file_get_contents("php://input");

if (strlen($data) > 0){

//$data_array = json_decode($data, true);

//file_put_contents("log.txt", "value:" . $data_array["rc001001"]["value"] . ", css:" . $data_array["rc001001"]["css"]);

//file_put_contents("log.txt",$data);

if(file_exists("db.sql")){

if ($db = sqlite_open("db.sql", 0666, $e)) {

sqlite_query($db, "DROP TABLE tbl");

sqlite_query($db, "CREATE TABLE tbl (col)");

sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");

} else {

die($e);

}

}else{

if ($db = sqlite_open("db.sql", 0666, $e)) {

sqlite_query($db, "CREATE TABLE tbl (col)");

sqlite_query($db, "INSERT INTO tbl (col) VALUES ('$data')");

} else {

die($e);

}

//header("Content-Type: text/javascript; charset=utf-8");

//echo $data;

//$result = sqlite_query($db, "SELECT col FROM tbl");

//var_dump(sqlite_fetch_array($result));

exit();

}

<head>

<style>

body{

margin: 0;

}

body, input[type="button"]{

font-size: 11px; font-family: "メイリオ";

}

input[type="button"]{

width: 100px;

margin: 5px 0 5px 5px;

}

#screen{

width: 100%; height: 100%;

background-color: blue; opacity: 0.1;

position: absolute; z-index: 1;

}

#container{

width: 90%; height: 90%;

overflow: scroll; -webkit-overflow-scrolling: touch;

}

table{

border-collapse: collapse;

}

td{

border: 1px solid #ccc;

cursor: pointer;

min-width: 15px; height: 15px;

}

</style>

</head>

<body>

<table>

<?php

for($r = 1; $r <= 30; $r++){

echo "<tr>";

for($c = 1; $c <= 30; $c++){

echo '<td class="r' . str_pad($r,3,0,STR_PAD_LEFT) . ' ' . 'c' . str_pad($c,3,0,STR_PAD_LEFT) . '" ';

echo 'id="' . 'rc' . str_pad($r,3,0,STR_PAD_LEFT) . str_pad($c,3,0,STR_PAD_LEFT) . '">';

echo '';

echo '</td>';

}

echo "</tr>";

}

</table>

<p>

ctrlを押しながらマウスを動かすと書ける。shiftを押しながらマウスを動かすと消せる。<br>

セルをクリックするとテキスト入力できる。enterかescかフォーカスを抜くと確定(キャンセル処理はなし)。

</p>

</div>

$("input#s").on("click",function(){

$("input#s, input#c").attr("disabled","");

var data = {};

var id;

for(var r = 1; r <= 30; r++){

for(var c = 1; c <= 30; c++){

id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";

data[id] = {

"value": $("#" + id + "").text(),

"css": $("#" + id + "").css("background-color")

};

}

//contentType: "application/json", dataType: "json", data: JSON.stringify(data),

$.ajax({

type: "post", url: "", async: true, dataType: "text", data: JSON.stringify(data),

success: function(data){

//console.log(data);

alert("OK");

$("input#s, input#c").attr("disabled", false);

window.location.reload();

},error: function(){

alert("NG");

$("input#s, input#c").attr("disabled", false);

}

});

$("input#c").on("click",function(){

window.location.reload();

});

$("td").on("mousemove",function(i){

if (i.ctrlKey) {

$(this).css("background-color","#ccc");

} else if (i.shiftKey) {

$(this).css("background-color","white");

}

});

$("td").on("click", function(i){

$("<input></input>",{

"type": "text",

"value": $(i.target).text(),

"css": {

"position": "absolute", "z-index": "1",

"top": i.pageY, "left": i.pageX

}

}).on("keydown", function(k){

if (k.keyCode === 13 || k.keyCode === 27) {

$(i.target).text( $(this).val() );

$(this).remove();

}

}).appendTo("body").focus().blur(function(){

$(i.target).text( $(this).val() );

$(this).remove();

});

$(window).on("load",function(){

$("#screen").hide();

});

</script>

<?php

if(file_exists("db.sql")){

if ($db = sqlite_open("db.sql", 0666, $e)) {

$row = sqlite_fetch_array(sqlite_query($db, "SELECT col FROM tbl"));

echo "<script>";

echo "var result = $row[0];";

echo "</script><script>";

echo 'for(var r = 1; r <= 30; r++){

for(var c = 1; c <= 30; c++){

var id = "rc" + ("00" + r).slice(-3) + ("00" + c).slice(-3) + "";

$("#" + id + "").css("background-color", result[id].css);

$("#" + id + "").text(result[id].value);

}

}';

echo "</script>";

}

</body>

</html>