|
 |
| |
php JavaScript CreateElement อยากเพิ่มช่องในตาราง ทำช่องคงที่ด้านล้าง เป็นช่องยอดรวม |
| |
 |
|
|
 |
 |
|
php JavaScript CreateElement อยากเพิ่มช่องในตาราง ทำช่องคงที่ด้านล้าง เป็นช่องยอดรวม
Code (PHP)
<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<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 item1 = 1
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+"\" VALUE=\"\"></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+"\" VALUE=\"\"></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+"\" VALUE=\"\"></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+"\" VALUE=\"\"></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+"\" VALUE=\"\"></center>"
document.frmMain.hdnMaxLine.value = intLine;
}
function RemoveRow()
{
intLine = parseInt(document.frmMain.hdnMaxLine.value);
if(parseInt(intLine) > 0)
{
theTable = (document.all) ? document.all.tbExp :
document.getElementById("tbExp")
theTableBody = theTable.tBodies[0];
theTableBody.deleteRow(intLine);
intLine--;
document.frmMain.hdnMaxLine.value = intLine;
}
}
</script>
<body Onload="CreateNewRow();CreateNewRow();CreateNewRow();">
<form name="frmMain" method="post">
<table width="445" border="1" id="tbExp">
<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>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
</form>
</body>
</html>
Tag : PHP, Ms SQL Server 2012, Ms SQL Server 2014, Ms SQL Server 2016, JavaScript, JAVA
|
|
|
 |
 |
 |
 |
| Date :
2020-01-17 09:34:42 |
By :
aumebun |
View :
947 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ประยุกต์จาก CreateNewRow ก็น่าจะสร้าง บันทัดผลรวมได้แล้วนะครับ
ส่วนผลรวม ก็ต้องเพิ่ม function สำหรับ event onchange ให้กับช่องที่นำมาคำนวณทุกช่อง
ส่วนโค๊ดลอง ทำเองดูก่อน ได้ไม่ได้ยังไงเอาโค๊ดมาลงไว้อีกที
แต่ถ้าคิดไม่ออก ลองเขียนเป็นภาษาไทยให้ตัวเองรู้เรื่องก่อน ว่าลักษณะทำงานมันควรจะเป็นอย่างไร
เช่น ถ้าพิมพ์ที่ช่อง ราคา ต้องเอาค่าอะไร มาบวกกับอะไร เพื่อนำไปไว้ ในช่องรวม แต่ละช่อง
คือที่มันยากเพราะไม่รู้ flow control (ลำดับเหตุการณ์ ของงาน) ถ้ารู้ลำดับเหตุการณ์ของงาน
ก็จะสามารถออกแบบ ตัวแปร มาลองรับ ค่าแต่ละค่า ได้เอง
|
| |
|
|
| |
| Date :
2020-01-17 13:42:25 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เปลี่ยนมาใช่ jquery ดีกว่าครับ ใช้ javascript คำสั่งมันยาวเกินไป
example
Code (PHP)
<input type"number" rel="price" value="100" readonly><br>
<input type"number" rel="price" value="200" readonly><br>
<input type"number" rel="price" value="300" readonly><br>
<input type"number" rel="price" value="400" readonly><br>
<input type"number" rel="price" value="500" readonly><br>
<span id="price"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').each(function(){
var totalPoints = 0;
$(this).find('[rel=price]').each(function(){
totalPoints += parseInt($(this).val());
});
$('#price').append(totalPoints);
});
});
</script>
|
ประวัติการแก้ไข
2020-01-17 15:37:15
| |
|
|
| |
| Date :
2020-01-17 15:35:29 |
By :
Genesis™ |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
generate html ให้ถูกที่ถูกทาง
Code (XML)
<tr>
<td colspan=2 > </td>
<td><div align="right">0123456</div></td>
<td><div align="right">0123456</div></td>
<td><div align="right">0123456</div></td>
</tr>
|
| |
|
|
| |
| Date :
2020-01-17 16:45:46 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
