Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ทำยังไงให้ตาราง reset หรือสร้างใหม่ เวลาใส่ตัวเลขในช่อง input ครับ (ด้านในมี code)

ทำยังไงให้ตาราง reset หรือสร้างใหม่ เวลาใส่ตัวเลขในช่อง input ครับ (ด้านในมี code)

เริ่มหัวข้อใหม่

Kaspersky

โพสกระทู้ ( 249 )
บทความ ( 0 )

code นี้จะสร้างเพิ่มเรื่อยๆ ตามตัวเลขที่เราใส่ เช่นตอนแรกสร้างไว้ 5 ตาราง พอเปลี่ยนเป็น 3 ก็จะสร้างเพิ่มอีก 3 เป็น 8 คือต้องการให้มันเปลี่ยนมาเป็น 3 ตาราง ตามที่เราใส่ตัวเลขไว้ล่าสุดครับ ถ้ามี code อันใหม่ที่ดีกว่า ลงก็ได้ครับ
1. ทำยังไงให้ตาราง reset หรือสร้างใหม่ เวลาใส่ตัวเลขในช่อง input (ผมไม่เก่ง java ผู้รู้ชี้แนะด้วยครับ)
2. ถ้าจะใส่ CusID นับแถวของตาราง เพิ่มอีกคอลั่ม จะต้องทำยังไงครับ
3. ถ้าเราจะนำค่า hdnMaxLine ไปใช้ในหน้าอื่นๆยังไงครับ

Code (PHP)

				<script language="javascript">
					function CreateNewRow(){
						var intLine = parseInt(document.frmMain.hdnMaxLine.value);
							intLine++;
						var theTable = document.all.tbExp
						var newRow = theTable.insertRow(theTable.rows.length)
							newRow.id = newRow.uniqueID
						var newCell
						//*** Column 1 ***//
						newCell = newRow.insertCell(0);
						newCell.id = newCell.uniqueID;
						newCell.setAttribute("className", "css-name");
						newCell.innerHTML = "<center><input type='text' size='5' name='column1_"+intLine+"' id='column1_"+intLine+"' value='' class='form-control'></center>";

						//*** Column 2 ***//
						newCell = newRow.insertCell(1);
						newCell.id = newCell.uniqueID;
						newCell.setAttribute("className", "css-name");
						newCell.innerHTML = "<center><input type='text' size='5' name='column2_"+intLine+"' id='column2_"+intLine+"' value='' class='form-control'></center>";
						
						//*** Column 3 ***//
						newCell = newRow.insertCell(2);
						newCell.id = newCell.uniqueID;
						newCell.setAttribute("className", "css-name");
						newCell.innerHTML = "<center><input type='text' size='5' name='column3_"+intLine+"' id='column3_"+intLine+"' value='' class='form-control'></center>";
						
						//*** Column 4 ***//
						newCell = newRow.insertCell(3);
						newCell.id = newCell.uniqueID;
						newCell.setAttribute("className", "css-name");
						newCell.innerHTML = "<center><input type='text' size='5' name='column4_"+intLine+"' id='column4_"+intLine+"' value='' class='form-control'></center>";
						
						//*** Column 5 ***//
						newCell = newRow.insertCell(4);
						newCell.id = newCell.uniqueID;
						newCell.setAttribute("className", "css-name");
						newCell.innerHTML = "<center><input type='text' size='5' name='column5_"+intLine+"' id='column5_"+intLine+"' value='' class='form-control'></center>";

						document.frmMain.hdnMaxLine.value = intLine;
					}
					
					function GenerateRow(){
						var intRows = parseInt(document.frmMain.txtCount.value);
						for(i=0;i<intRows;i++){
							CreateNewRow();
						}
					}

				</script>
				<body>
				<form name="frmMain" method="post">
				<input type="hidden" name="hdnMaxLine" value="0">
				<p>Number of Activities = <input type="text" name="txtCount" value="" size="5" onkeyup="GenerateRow();"></p><br>
				<table class="table table-striped" border='0'>
				<thead bgcolor="#00CCFF">
				  <tr>
					<td><div align="center">Column 1 </div></td>
					<td><div align="center">Column 2 </div></td>
					<td><div align="center">Column 3 </div></td>
					<td><div align="center">Column 4 </div></td>
					<td><div align="center">Column 5 </div></td>
				  </tr>
				</thead>
				<tbody id="tbExp"></tbody>
				</table>
				<input value="Next >>" type="button">
				</form>

Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery

ประวัติการแก้ไข
2014-10-29 00:59:23
2014-10-29 01:02:03

Date : 2014-10-29 00:35:32

By : nPointXer

View : 886

Reply : 5

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

แนะนำพื้นฐาน jquery ครับ

Go to : Simple add/delete table row with jQuery by PlaKriM

http://www.select2web.com/jquery/jquery-insert-row-to-table.html

ลองปรับดูครับ

Edit#
พอดีว่างเลยนั่งเขียนเล่น ๆ

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('#btnPluz').click(function(){ //เมื่อคลิกปุ่ม เพิ่ม
		$("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody
        var num=parseInt($('#number').val())+1; //รับค่าตัวเลข
		for(var i=1; i<num ; i++){ //นำมาวนลูป
			//alert(i);
			$('#tbody').append("<tr id='tr"+i+"' rel='"+i+"'><td> ลำดับที่ <span>"+i+"</span><input type='text' name='name[]'> </td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array 
		}
     });
});
</script>
<table>
<tr>
<td>
<input type="number" id="number" value="1" size="5">
	<button type="button" id="btnPluz" >เพิ่ม</button>
</td>
</tr>
      	<tbody id="tbody">
<!-- tr จะถูกสร้างลงตรงนี้ -->
        </tbody> 
</table>

ประวัติการแก้ไข
2014-10-29 08:54:59
2014-10-29 08:55:36
2014-10-29 08:56:28

Date : 2014-10-29 08:07:45

By : apisitp

No. 2

Kaspersky

โพสกระทู้ ( 249 )
บทความ ( 0 )

ผมลองปรับแต่งให้เข้ากับงานที่ผมต้องการ ได้ประมาณนี้ครับ
**อยากให้มันสร้างตารางโดยไม่ต้องกดปุ่ม Add ครับ ทำยังไง
**แต่ถ้าเป็น code เดิมจะทำได้ครับ เพียงแค่ใส่ $("#tbExp>tr").remove(); ด้านล่างบรรทัด function GenerateRow(){ ใน javascript ก็ใช้ได้แล้ว แต่ code มันยาวเลยอยากได้ของคุณ Doctor K ที่โพสไว้ให้ อย่างว่าครับ ผมไม่เป็นเลย javascript เนี่ย แก้ไปแก้มา Error ซะงั้น! เลยทำได้เท่านี้

Code (PHP)

<script>
$(function(){
    $('#btnPluz').click(function(){ //เมื่อคลิกปุ่ม เพิ่ม
		$("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody
        var num=parseInt($('#number').val())+1; //รับค่าตัวเลข
		for(var i=1; i<num ; i++){ //นำมาวนลูป
			//alert(i);
			$('#tbody')
				.append(
				"<tr id='tr"+i+"'><td>"+i+"</td><td><input type='text' name='col1_"+i+"'></td><td><input type='text' name='col2_"+i+"'></td><td><input type='text' name='col3_"+i+"'></td><td><input type='text' name='col4_"+i+"'></td><td><input type='text' name='col5_"+i+"'></td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array 
		}
     });
});
</script>

<p>Number of Activities = <input type="text" id="number" value="0" size="5">
<button type="button" id="btnPluz" >Add</button></p>
<table class="table table-striped" border='0'>
		<thead bgcolor="#00CCFF" align="center">
			 <tr>
				<td>CusID </td>
				<td>Column 1 </td>
				<td>Column 2 </td>
				<td>Column 3 </td>
				<td>Column 4 </td>
				<td>Column 5 </td>
			</tr>
		</thead>
      	<tbody id="tbody" align="center">
<!-- tr จะถูกสร้างลงตรงนี้ -->
        </tbody> 
</table>

Date : 2014-10-29 15:12:09

By : nPointXer

No. 3

BIrD

โพสกระทู้ ( 535 )
บทความ ( 0 )

$('#btnPluz').click(
เป็น
$('#number').keyup(...........

ประวัติการแก้ไข
2014-10-29 17:34:30

Date : 2014-10-29 17:33:21

By : gaowteen

No. 4

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

Date : 2014-10-29 21:18:38

By : apisitp

No. 5

Kaspersky

โพสกระทู้ ( 249 )
บทความ ( 0 )

ขอบคุณครับ ได้แล้ว

Code (PHP)

<script>
$(function(){
    $('#number').keyup(function(){ //เมื่อคลิกปุ่ม เพิ่ม
		$("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody
        var num=parseInt($('#number').val())+1; //รับค่าตัวเลข
		for(var i=1; i<num ; i++){ //นำมาวนลูป
			//alert(i);
			$('#tbody')
				.append(
				"<tr id='tr"+i+"'><td>"+i+"</td><td><input type='text' name='col1_"+i+"'></td><td><input type='text' name='col2_"+i+"'></td><td><input type='text' name='col3_"+i+"'></td><td><input type='text' name='col4_"+i+"'></td><td><input type='text' name='col5_"+i+"'></td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array 
		}
     });
});
</script>

<p>Number of Activities = <input type="text" id="number" value="0" size="5">
<table class="table table-striped" border='0'>
		<thead bgcolor="#00CCFF" align="center">
			 <tr>
				<td>CusID </td>
				<td>Column 1 </td>
				<td>Column 2 </td>
				<td>Column 3 </td>
				<td>Column 4 </td>
				<td>Column 5 </td>
			</tr>
		</thead>
      	<tbody id="tbody" align="center">
<!-- tr จะถูกสร้างลงตรงนี้ -->
        </tbody> 
</table>

Date : 2014-10-30 10:38:23

By : nPointXer

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ทำยังไงให้ตาราง reset หรือสร้างใหม่ เวลาใส่ตัวเลขในช่อง input ครับ (ด้านในมี code)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก