Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > Javascript Sum Dynamic Field ให้สามารถคำนวนผลรวมทุกแถว และแถวก็ใช้ Javascript ในการเพิ่มแต่ละแถว มีรูปภาพประกอบ

Javascript Sum Dynamic Field ให้สามารถคำนวนผลรวมทุกแถว และแถวก็ใช้ Javascript ในการเพิ่มแต่ละแถว มีรูปภาพประกอบ

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

yeanz

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

นี่คือภาพหน้าจอนะคะ ขั้นตอนการทำงานก็จะเป็น
1.คลิก + เพิ่มเพิ่มแถว จากนั้น กรอกตัวเลขในคอลัมภ์สุดท้าย
2.เมื่อต้องการเพิ่มแถวใหม่ ก็คลิก + อีก กรอกข้อมูลจนครบที่ต้องการ
3.คลิก Calculate เพื่อทำการคำนวนตัวเลขทั้งหมดที่กรอกในคอลัมภ์สุดท้าย และจะแสดงในช่องว่างบรรทัดเดียวกับปุ่ม Calculate

คือตอนนี้สามารถทำการให้เพิ่มแถวได้แล้วค่ะ แต่ว่ายังไม่สามารถนำข้อมูลที่เพิ่มมาคำนวณได้ในหน้านี้

นี่คือ Code นะคะCode

<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<meta name='description' content=''/>
<title>รายงาน :: กรอกรายงาน</title>
<link rel="shortcut icon" href="images/crunch_logo_rgb.gif"  />
<link href="css/main_page.css" rel="stylesheet" type="text/css" />
<link href="css/content_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="js/epoch_styles.css" />

<script type="text/javascript" src="js/epoch_classes.js"></script>

<script language="javascript">

	function CreateNewRow()
	{
		var intLine = parseInt(document.form1.hdnMaxLine.value);
		intLine++;
		alert(intLine);
		//alert(hdnMaxLine);
			
		var theTable = document.getElementById("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=\"30\" NAME=\"acc_cur_de_"+intLine+"\"  ID=\"acc_cur_de_"+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=\"30\" NAME=\"acc_cur_note_"+intLine+"\" ID=\"acc_cur_note_"+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=\"15\" NAME=\"acc_cur_amount_"+intLine+"\"  ID=\"acc_cur_amount_"+intLine+"\" VALUE=\"\"></center>";
		

		document.form1.hdnMaxLine.value = intLine;
	}
	
	function RemoveRow()
	{
		intLine = parseInt(document.form1.hdnMaxLine.value);
		alert(intLine);
		if(parseInt(intLine) > 0)
		{
				theTable = document.getElementById("tbExp");				
				theTableBody = theTable.tBodies[0];
				theTableBody.deleteRow(intLine);
				intLine--;
				document.form1.hdnMaxLine.value = intLine;
		}	
	}	
</script>


<script language="javascript">

	function CreateNewRow_n()
	{
		var intLine_n = parseInt(document.form1.hdnMaxLine_n.value);
		intLine_n++;
		alert(intLine_n);
		//alert(hdnMaxLine);
			
		var theTable = document.getElementById("tbExp1");
		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=\"30\" NAME=\"acc_noncur_de_"+intLine_n+"\"  ID=\"acc_noncur_de_"+intLine_n+"\" VALUE=\"\"></center>";

		//*** Column 2 ***//
		newCell = newRow.insertCell(1);
		newCell.id = newCell.uniqueID;
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"30\" NAME=\"acc_noncur_note_"+intLine_n+"\" ID=\"acc_noncur_note_"+intLine_n+"\"  VALUE=\"\"></center>";
		
		//*** Column 3 ***//
		newCell = newRow.insertCell(2);
		newCell.id = newCell.uniqueID;
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"15\" NAME=\"acc_noncur_amount_"+intLine_n+"\"  ID=\"acc_noncur_amount_"+intLine_n+"\" VALUE=\"\"></center>";
		

		document.form1.hdnMaxLine_n.value = intLine_n;
	}
	
	function RemoveRow_n()
	{
		intLine_n = parseInt(document.form1.hdnMaxLine_n.value);
		alert(intLine_n);
		if(parseInt(intLine_n) > 0)
		{
				theTable = document.getElementById("tbExp1");				
				theTableBody = theTable.tBodies[0];
				theTableBody.deleteRow(intLine_n);
				intLine_n--;
				document.form1.hdnMaxLine_n.value = intLine_n;
		}	
	}	
</script>
<style type="text/css">
<!--
.style15 {color: #0B3975}
.style8 {	font-size: 14px;
	font-weight: bold;
	color: #0B3975;
}
.style9 {	font-size: 14px;
	font-weight: bold;
	color: #0B3975;
}
-->
</style>
</head>
<body>



	<!-- start contain contain all object -->
	<div id="contain">
        <!-- start head -->
            <div id="head">
              <div align="center"><img src="images/hd2.jpg" width="1200" height="150" /></div>
            </div>        
      <!-- end head -->
<div id="menu_h">
<? include('menu/acc_top_menu.php')?>
</div>
  <br />
        <!-- start main -->
        <div id="main">
        
            <!-- start content -->
                <!-- start manu -->
   
   
<!-- end menu -->

<div id="content">
  <p><span class="style6"><img src="images/table.png" width="24" height="24" align="absmiddle" />&nbsp;รายงาน</span></p>
  <p>&nbsp;</p>
  <form id="form2" name="form2" method="post" action="search_statement.php?tempId=<? echo $arr11["off_id"];?>">
    <table width="1165" border="0" cellpadding="1" cellspacing="1">
      <tr>
        <td height="25" colspan="6" class="style8"><img src="images/page_add.png" alt="" width="16" height="16" /><a href="form_statement.php?tempId=<? echo $arr11["off_id"];?>"> เพิ่มรายงาน</span></a></td>
      </tr>
      <tr>
        <td height="25" colspan="6" class="style15"><img src="images/search.png" width="16" height="16" /><span class="style8"> ค้นหารายงาน</span><span class="style9">(**กรุณากรอกข้อมูลให้ครบถ้วน)</span></td>
      </tr>
      <tr>
        <td width="121" class="style15">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ส่วนราชการ </td>
        <td width="16" class="style15"><div align="center">::</div></td>
        <td width="197" class="style15"><label> <font id="gover_h">
          <select name="acc_unit_id" id="acc_unit_id">
                    </select>
        </font> </label></td>
        <td width="49" class="style15">วันที่ </td>
        <td width="17" class="style15"><div align="center">::</div></td>
        <td class="style15"><label>
          <input name="acc_state_date_h" type="text" id="acc_state_date_h" size="20"  />
        </label></td>
      </tr>
      <tr>
        <td colspan="6"><div align="center">
            <input type="submit" name="button2" id="button2" value="แสดง" />
          &nbsp;
          <input type="reset" name="button3" id="button3" value="ยกเลิก" />
          </div>
            <div align="center"></div>
          </label></td>
      </tr>
    </table>
  </form>
  <hr  />
  <p><span class="style6"><img src="images/edit_1.png" width="24" height="24" align="absmiddle" />กรอกรายงานข้อมูลฐานะการเงิน(บช.๔๑)</span><br />
    <br />
    
  </p>
  <form id="form1" name="form1" method="post" action="insert_statement.php?tempId=<? echo $arr11["off_id"];?>" enctype="multipart/form-data">
   <input name="acc_state_id" type="hidden" id="acc_state_id" value="<? echo $n; ?>" />
   <input name="acc_current_id" type="hidden" id="acc_current_id" value="<? echo $n2; ?>" />
  <input name="acc_noncur_id" type="hidden" id="acc_noncur_id" value="<? echo $n3; ?>" />
  <table width="769" align="center" cellpadding="1" cellspacing="1">
    <tr>
      <td height="22" colspan="4" bgcolor="#0066FF"><div align="center" class="style7">
        <div align="center">ข้อมูลฐานะการเงิน</div>
      </div>        <div align="center"></div>      <div align="center"></div>      <div align="center"></div>      <div align="center"></div>      <div align="center"></div></td>
      </tr>
    <tr>
      <td width="163" bgcolor="#4EACF6">&nbsp;เลือกส่วนราชการ</td>
      <td width="21" colspan="-3"><div align="center">:: </div></td>
      <td width="573" colspan="-2"><label><font id="gover">
        <select name="acc_unit_id" id="acc_unit_id">
        </select>
      </font></label>      </td>
      </tr>
    <tr>
      <td bgcolor="#4EACF6">&nbsp;วัน/เดือน/ปี</td>
      <td colspan="-3"><div align="center">::</div></td>
      <td colspan="-2"><label>
      <input name="acc_state_date" type="text" id="acc_state_date" size="15" />
      </label></td>
      </tr>
    <tr>
      <td colspan="4"><p>&nbsp;</p>
        <table width="558" align="center" cellpadding="1" cellspacing="1" id="tbExp">
          <tr>
            <td width="225" height="22" bgcolor="#E1E1E1"><div align="center"><strong>สินทรัพย์หมุนเวียน</strong></div></td>
            <td width="180" bgcolor="#E1E1E1"><div align="center"><strong>หมายเหตุ</strong></div>
                <div align="center"></div>
              <div align="center"></div></td>
            <td width="208" bgcolor="#E1E1E1"><div align="center"><strong>(หน่วย:บาท)</strong></div></td>
          </tr>

        </table>
        <p>
          <input type="hidden" name="hdnMaxLine" id="hdnMaxLine" value="0" />
          <input name="btnAdd" type="button" id="btnAdd" value="+" onclick="CreateNewRow();" />
          <input name="btnDel" type="button" id="btnDel" value="-" onclick="RemoveRow();" />
        </p>
        
       
        <table width="558" align="center" cellpadding="1" cellspacing="1" id="tbExp2">
          <tr>
            <td width="207" height="22" bgcolor="#E1E1E1"><div align="center">
              <label>
              <input name="button" type="button" id="button" value="Calculate"/>
              </label>
            </div></td>
            <td width="181" bgcolor="#E1E1E1"><div align="center"><strong>รวมสินทรัพย์หมุนเวียน</strong></div>
              <div align="center"></div></td>
            <td width="158" bgcolor="#E1E1E1"><div align="center">
              <label>
              <input name="textfield" type="text" id="textfield" size="15" />
              </label>
            </div></td>
       
		
        </table>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <table width="558" align="center" cellpadding="1" cellspacing="1" id="tbExp1">
          <tr>
            <td width="225" height="22" bgcolor="#E1E1E1"><div align="center"><strong>สินทรัพย์ไม่หมุนเวียน</strong></div></td>
            <td width="180" bgcolor="#E1E1E1"><div align="center"><strong>หมายเหตุ</strong></div>
                <div align="center"></div>
              <div align="center"></div></td>
            <td width="208" bgcolor="#E1E1E1"><div align="center"><strong>(หน่วย:บาท)</strong></div></td>
          </tr>
       
        </table>
        <input type="hidden" name="hdnMaxLine_n" id="hdnMaxLine_n" value="0" />
        <input name="btnAdd_n" type="button" id="btnAdd_n" value="+" onclick="CreateNewRow_n();" />
        <input name="btnDel_n" type="button" id="btnDel_n" value="-" onclick="RemoveRow_n();" />
        <p></p></td>
      </tr>

  </table>
  <p>&nbsp;</p>
  </form>
	<p>&nbsp;</p>
	<p><br />
        </p>
</div>            
<!-- end content -->

<br />
        </div>
  <!-- end main -->
        <!-- start footer -->
            <div id="footer">
              <p>ทะเบียนคุม/บัญชีย่อย/รายงานการเงิน รบช.55</p>
</div>        <!-- end footer -->
    </div><!-- end contain -->
</body>
</html>

Tag : JavaScript

Date : 2013-03-05 00:29:52

By : yeanz

View : 6190

Reply : 6

No. 1

TC Admin

โพสกระทู้ ( 74,059 )
บทความ ( 838 )

Apply จากตัวนี้ครับ ไม่ยาก

Code (JavaScript)

<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncSum()
{
	var Total = 0;
	for(i=1;i<=document.form1.hdnLine.value;i++)
	{
		if(eval("document.form1.txtInput"+i+".value")!="")
		{
			Total = Total + eval("document.form1.txtInput"+i+".value");
		}
	}

	alert(Total);
}
</script>
<form action="page.cgi" method="post" name="form1">
Input 1 <input name="txtInput[]" id="txtInput1" type="text"><br>
Input 2 <input name="txtInput[]" id="txtInput2" type="text"><br>
Input 3 <input name="txtInput[]" id="txtInput3" type="text"><br>
Input 4 <input name="txtInput[]" id="txtInput4" type="text"><br>
Input 5 <input name="txtInput[]" id="txtInput5" type="text"><br>
<input type="hidden" name="hdnLine" value="5">
<input name="btn" type="button" value="Sum"  OnClick="JavaScript:return fncSum();">
</form>
</body>
</html>

Date : 2013-03-05 06:16:13

By : mr.win

No. 2

yeanz

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

ขอบคุณคุณวินนะคะ เดี๋ยวขอลองไป apply ดูนะคะ ได้ผลยังไงจะรีบมาบอกค่ะ ขอบคุณมากเลยค่ะ

Date : 2013-03-05 10:30:23

By : yeanz

No. 3

yeanz

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

คุณวินคะ พอดีลองนำโค๊ดไปเแก้ไขโดยใส่ parseFloat() แทนที่ eval() ของคุณวิน ปรากฏว่ามันไม่สามารถคำรวรหาผลรวมได้ค่ะ ตามรูปภาพเลยนะคะ

ทดสอบ

ส่วนด้านล่างนี้เป็นโค๊ดของคุณวินที่หนูลองแก้ไขค่ะ โดยใส่ parseFloat() แทนที่ eval()
Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncSum()
{
	var Total = 0;
	for(i=1;i<=document.form1.hdnLine.value;i++)
	{
		if(parseFloat("document.form1.txtInput"+i+".value")!="")
		{
			Total += parseFloat("document.form1.txtInput"+i+".value");
		}
	}

	alert(Total);
}
</script>
<form action="page.cgi" method="post" name="form1">
Input 1 <input name="txtInput[]" id="txtInput1" type="text"><br>
Input 2 <input name="txtInput[]" id="txtInput2" type="text"><br>
Input 3 <input name="txtInput[]" id="txtInput3" type="text"><br>
Input 4 <input name="txtInput[]" id="txtInput4" type="text"><br>
Input 5 <input name="txtInput[]" id="txtInput5" type="text"><br>
<input type="hidden" name="hdnLine" value="5">
<input name="btn" type="button" value="Sum"  OnClick="JavaScript:return fncSum();">
</form>
</body>
</html>

ไม่ทราบว่าเป็นเพราะอะไร รวบกวนด้วยนะคะ ขอบคุณมากค่ะ

Date : 2013-03-05 12:41:40

By : yeanz

No. 4

yeanz

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

ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.win เมื่อวันที่ 2013-03-05 06:16:13

รายละเอียดของการตอบ ::

รบกวนด้วยนะคะคุณวิน พอดีนำตััวแปร i มาเชื่อมไม่ได้จริงๆ มันจะขึ้นค่า NaN ตลอดเลยค่ะ หาวิธีเชือมไม่ได้จริงๆ
ขอบคุณค่ะ

Date : 2013-03-06 15:49:56

By : yeanz

No. 5

TC Admin

โพสกระทู้ ( 74,059 )
บทความ ( 838 )

ใช้ IsNan เข้ามาตรวจสอบครับ

Code (JavaScript)

<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncSum()
{
	var Total = 0;
	for(i=1;i<=document.form1.hdnLine.value;i++)
	{
		var num = eval("document.form1.txtInput"+i+".value")
		if(num != "" && isNan(num))
		{
			Total = Total + parseFloat(num);
		}
	}

	alert(Total);
}
</script>
<form action="page.cgi" method="post" name="form1">
Input 1 <input name="txtInput[]" id="txtInput1" type="text"><br>
Input 2 <input name="txtInput[]" id="txtInput2" type="text"><br>
Input 3 <input name="txtInput[]" id="txtInput3" type="text"><br>
Input 4 <input name="txtInput[]" id="txtInput4" type="text"><br>
Input 5 <input name="txtInput[]" id="txtInput5" type="text"><br>
<input type="hidden" name="hdnLine" value="5">
<input name="btn" type="button" value="Sum"  OnClick="JavaScript:return fncSum();">
</form>
</body>
</html>

Date : 2013-03-06 16:34:16

By : mr.win

No. 6

Guest

Code (JavaScript)

fncSum = function()
{
	var Total = 0;
	for(i=1;i<=document.form1.hdnLine.value;i++)
	{
		if(document.form1["txtInput"+i].value != "")
		{
			Total += parseFloat(document.form1["txtInput"+i].value);
		}
	}

	alert(Total);
}

Date : 2013-03-09 14:06:48

By : nodtem66

ค้นหาข้อมูล

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

Re : Javascript Sum Dynamic Field ให้สามารถคำนวนผลรวมทุกแถว และแถวก็ใช้ Javascript ในการเพิ่มแต่ละแถว มีรูปภาพประกอบ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); Javascript Sum Dynamic Field ให้สามารถคำนวนผลรวมทุกแถว และแถวก็ใช้ Javascript ในการเพิ่มแต่ละแถว มีรูปภาพประกอบ

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

ค้นหาข้อมูล

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

Notice

Javascript Sum Dynamic Field ให้สามารถคำนวนผลรวมทุกแถว และแถวก็ใช้ Javascript ในการเพิ่มแต่ละแถว มีรูปภาพประกอบ