|
|
|
ต้องการทำปุ่มเพิ่มแถว สำหรับกรอกข้อมูลไปเรื่อยๆตามที่ต้องการ ยังไงครับ |
|
|
|
|
|
|
|
JavaScript createElement Select and Get item from MySql Database
createElement('select'); สร้าง Element ของ Select Option พร้อมกับ ดึงข้อมูลจาก MySQL Database ครับ
|
|
|
|
|
Date :
2015-01-19 13:05:05 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมลองเอาไปใช้ดูแล้วครับตอนแรกก็ใช้ได้ปกติ(กด + ได้) ทีนี้ผมลองเอามาปรับปรุงตามที่ต้องการดูแล้วมันใช้ไม่ได้ครับ
แล้วตอนนี้พอลบออกหมดแล้วเอาโค๊ดที่พี่ให้มาไปใส่เมหือนเดิมมันใช้ไม่ได้แล้วอะครับ กด + เพิ่ม ไม่ขึ้นเลย ต้องตรวจสอบที่ตรงไหนหรอครับ
|
|
|
|
|
Date :
2015-01-21 09:19:44 |
By :
odafla |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ต้องการแบบไหนครับ คล้ายๆแบบนี้ป่าว
<table id="myTable">
</table>
<br>
<button onclick="add_row()">+</button>
<button onclick="del_row()">-</button>
<script>
function add_row() {
var table = document.getElementById("myTable");
count_rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(count_rows);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<input type='text' name='txtA'"+count_rows+" value>";
cell2.innerHTML = "<input type='text' name='txtB'"+count_rows+" value>";
}
function del_row(){
var table = document.getElementById("myTable");
count_rows = table.getElementsByTagName("tr").length;
document.getElementById("myTable").deleteRow(count_rows-1);
}
</script>
|
|
|
|
|
Date :
2015-01-23 16:22:20 |
By :
pgm |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
javascript console ช่วยท่านได้
|
|
|
|
|
Date :
2015-01-23 18:02:55 |
By :
yamcrocodile |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองไปรันเล่นดูครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!--ชุดนี้ หาโหลดเอานะครับ -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.11.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/sb-admin-2.css" rel="stylesheet">
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/sb-admin-2.js"></script>
<!--ชุดนี้ หาโหลดเอานะครับ -->
<style type="text/css">
.require{
height:20px;
color:#FF0000;
padding-left:5px;
padding-right:5px;
font-size:12px;
line-height:15px;
width:220px;
float:none;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">บันทึกข้อมูล ศษ.01</h1>
</div>
</div>
<script>
$(function(){
$("#studentID").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
$('#btnPluz').click(function(){
var num=parseInt($('#number').val())+1;
//alert(num);
var tr=$("<tr id='tr"+num+"' rel='"+num+"'><td> <div class='row'><div class='col-lg-12'><div class='panel panel-default'><div class='panel-heading'>รายละเอียด คนที่ <span style='font-size:48px; color:#F00;'><b>"+num+"</b></span> <div class='row'><div class='col-lg-12' align='right'><button id='btnDel' rel='"+num+"' class='btn btn-danger'>ลบข้อมูล</button> <button type='submit' class='btn btn-warning' id='btnConfirm'>ยืนยัน</button> <button type='reset' class='btn btn-default'>Reset</button></div></div></div><div class='panel-body'><div class='row'><div class='col-lg-4'><div class='form-group'><label>รหัสนิสิต</label><input class='form-control' id='studentID' type='text' name='studentID"+num+"' maxlength='8'/></div><div class='form-group'><label>คำนำหน้าชื่อ</label><div class='radio'><label><input type='radio' name='pname"+num+"' id='pname"+num+"' value='1' checked>นาย</label> <label><input type='radio' name='pname"+num+"' id='pname"+num+"' value='2'>นาง</label> <label><input type='radio' name='pname"+num+"' id='pname"+num+"' value='3'>นางสาว</label></div></div><div class='form-group'><label>ชื่อ</label><input class='form-control' type='text' name='fname"+num+"' /></div><div class='form-group'><label>นามสกุล</label><input class='form-control' type='text' name='lname"+num+"' /></div><div class='form-group'><label>โทรศัพท์</label><input class='form-control' type='text' name='mobile"+num+"' /></div></div></div></div></div><!-- xx--></div></div></div> <!-- div class='row'><div class='col-lg-12' align='right'><button id='btnDel' rel='"+num+"' class='btn btn-danger'>ลบข้อมูล</button> <button type='submit' id='btnConfirm' class='btn btn-warning'>ยืนยัน</button> </div></div --> </td></tr>");
$('#addRow tr:first').before(tr);
$('#number').val(num);
$("#studentID").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$('#addRow').on('click','#btnDel',function(){
var num=parseInt($('#number').val())-1;
var rel=$(this).attr('rel');
var rowCount = $('#addRow>tr').length;
var i=rowCount;
$('#number').val(num);
$("#tr"+rel+"").remove();
$('#addRow span').each(function(index, element) {
--i
$(this).text(i);
});
});
});
</script>
<script type="text/javascript">
$(function(){
$('#ss01').on('click','#btnConfirm',function(){
var chk_true = 0;
var chk_false = 0;
var chk_all = 0;
var i = 1;
$("input[name*='studentID']").each(function(){
++chk_all
var valStudent = $(this).val();
if( valStudent.length < 7 ){
$('p[rel='+i+']').remove();
$("input[name='studentID"+i+"']").after("<p class='require' rel='"+i+"'>กรอกรหัสนิสิตไม่ครบ 8 หลัก "+i+"</p>");
++chk_false
++i
}
else{
++chk_true
++i
}
});//ปิด name*
/*
alert("ค่าผิด "+chk_false);
alert("ค่าถูก "+chk_true);
alert("ค่าทั้งหมด "+chk_all);
*/
if(chk_true == chk_all){
return true;
}else{
$("#studentID").focus();
return false;
}
});//ปิด form
}); //ปิด function
</script>
<form role="form" name="ss01" id="ss01" class="form-group" method="post" action="?menu=insert">
<table class="table table-bordered table-condensed">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<tr>
<td>
<div class="row">
<div class="col-lg-9"> </div>
<div class="col-lg-1">
<div class="form-group"><input name="forLoop" type="text" class="form-control input-mini" id="number" value="1" maxlength="2" style="color:red;" readonly>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<button type="button" id="btnPluz" class="btn btn-success">เพิ่มการบันทึก</button>
</div>
</div>
</div>
</td>
</tr>
</div></div></div>
</table>
<table class="table table-bordered table-condensed">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<tbody id="addRow">
<tr id="tr1" rel="1"></tr>
</tbody>
</div></div></div>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr><td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
รายละเอียด คนที่ <span style="font-size:48px; color:#F00;"><b>1</b></span>
<div class="row">
<div class="col-lg-12" align="right">
<!-- input type="submit" id="btnConfirm" class="btn btn-warning" value="ยืนยัน" -->
<button type="submit" class="btn btn-warning" id="btnConfirm" >ยืนยัน</button>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>รหัสนิสิต</label>
<input name="studentID1" type="text" class="form-control" id="studentID" maxlength="8" />
</div>
<div class="form-group">
<label>คำนำหน้าชื่อ</label>
<div class="radio">
<label>
<input type="radio" name="pname1" id="pname1" value="1" checked>นาย
</label>
<label>
<input type="radio" name="pname1" id="pname2" value="2">นาง
</label>
<label>
<input type="radio" name="pname1" id="pname3" value="3">นางสาว
</label>
</div>
</div>
<div class="form-group">
<label>ชื่อ</label>
<input class="form-control" type="text" name="fname1" />
</div>
<div class="form-group">
<label>นามสกุล</label>
<input class="form-control" type="text" name="lname1" />
</div>
<div class="form-group">
<label>โทรศัพท์</label>
<input class="form-control" type="text" name="mobile1" />
</div>
</div>
</div><!-- /.row (nested) -->
</div><!-- /.panel-body -->
</div></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-12" align="right">
</div>
</div>
<br>
</form>
</div>
<!-- /#page-wrapper -->
</body></html>
|
|
|
|
|
Date :
2015-01-24 09:42:27 |
By :
apisitp |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณทุกท่านครับ เดี๊ยวจะลองไปปรับใช้ดูครับ
ปล.ไม่ได้เปิดคอมหลายวัน ขออภัยที่ตอบช้าครับ
|
|
|
|
|
Date :
2015-01-26 08:18:01 |
By :
odafla |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองเอาของความเห็นที่ 3 ไปใช้แล้วครับ โอเคเลย แต่ตอนนี้ติดตรงที่เวลาจะบันทึกลงฐานข้อมูล จะทำยังไงให้มันเข้าทุกค่าครับ
คือตอนนี้ลองส่งค่ามาแล้วมันมาตัวเดียวน่ะครับ
|
ประวัติการแก้ไข 2015-01-26 08:35:48 2015-01-26 10:34:27
|
|
|
|
Date :
2015-01-26 08:34:07 |
By :
odafla |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 05
|