ช่วยดูโค้ดให้หน่อย คับ คือ อยากสร้างตารางที่ใช้ keyup อะคับ
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<form action="?">
<script type="text/javascript">
$(document).ready(function(){
$("[name=cnt]").keyup(function(){
var cnt = parseInt($(this).val()), a=0;
var template = '<tr class="scholar" id="scholar_%d"><td width="60"><input type="text" name="brethren_num_study[%d]"id="brethren_num_study_%d" size="5" /> </td><td width="120"> <input type="text" name="brethren_sex_study[%d]" id="brethren_sex_study_%d" size="10" /> </td><td width="120"> <input type="text" name="brethren_old_study[%d]" id="brethren_old_study_%d" size="5" /> </td> <td width="120"> <input type="text" name="brethren_year_study[%d]" id="brethren_year_study_%d" size="20" /> </td> <td width="120"> <input type="text" name="brethren_school_study[%d]" id="brethren_school_study_%d" size="20" /> </td> </tr>';
var now_scholar = parseInt($(".scholar").length);
if(now_scholar < cnt){
for(a=now_scholar+1; a<=cnt; a++){
$("tbody").append(template.replace(/%d/g,a));
}
}
else if(now_scholar > cnt){
for(a=cnt+1; a<=now_scholar; a++){
$("#scholar_"+a).remove();
}
}
});
});
</script>
<label >สมาชิกที่อายุต่ำกว่า 20</label><input name="cnt" type="text" size="2" maxlength="1" id="one"/><br />
<table border="1" width="550">
<tbody >
<tr id="a">
<th width="37"><div align="center">คนที่</div></th>
<th width="69"><div align="center">เพศ</div></th>
<th width="34"><div align="center">อายุ</div></th>
<th width="39"><div align="center">ชั้นปี</div></th>
<th width="337"><div align="center">สถานที่การศึกษา</div></th>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("[name=cnt2]").keyup(function(){
var cnt2 = parseInt($(this).val()), i=0;
var temp = '<tr class="scho" id="scho_%d"><td width="60"><input type="text" name="brethren_num_work[%d]"id="brethren_num_work_%d" size="4" /> </td><td width="120"> <input type="text" name="brethren_sex_work[%d]" id="brethren_sex_work_%d" size="8" /> </td><td width="120"> <input type="text" name="brethren_old_work[%d]" id="brethren_old_work_%d" size="4" /> </td> <td width="120"> <input type="text" name="brethren_woot_work[%d]" id="brethren_woot_work_%d" size="8" /> </td> <td width="120"> <input type="text" name="brethren_workplace[%d]" id="brethren_workplace_%d" size="20" /> </td> <td width="120"> <input type="text" name="brethren_revenue_work[%d]" id="brethren_revenue_work_%d" size="15" /> </td> </tr>';
var now_scho = parseInt($(".scho").length);
if(now_scho < cnt2){
for(i=now_scho+1; i<=cnt2; i++){
$("table thead").append(temp.replace(/%d/g,i));
}
}
else if(now_scho > cnt2){
for(i=cnt2+1; i<=now_scho; i++){
$("#scho_"+i).remove();
}
}
});
});
</script>
<label >สมาชิกที่อายุมากกว่า 20</label><input name="cnt2" type="text" size="2" maxlength="1" id="two" /><br />
<table border="1" width="550">
<thead >
<th width="30"><div align="center">คนที่</div></th>
<th width="60"><div align="center">เพศ</div></th>
<th width="30"><div align="center">อายุ</div></th>
<th width="90"><div align="center">วุฒิการศึกษา</div></th>
<th width="120"><div align="center">สถานที่ทำงาน</div></th>
<th width="86"><div align="center">รายได้เดือนละ</div></th>
<tr>
</thead>
</table>
</form>
พอดีผมอยากได้ สองตารางนี้ ไป ใช้ อะ คับ แต่เอาไปใช้ร่วมกับตารางอื่น มันมีปัญหาพังทั้งเว็บเลย ควรแก้ไขยังไง คับ ต้องอ้าถึงอยังไงที่จะไม่กระทบตารางอื่นอะคับ
</head>
<body>
<form action="?">
<script type="text/javascript">
$(document).ready(function(){
$("[name=cnt]").keyup(function(){
var cnt = parseInt($(this).val()), a=0;
var template = '<tr class="scholar" id="scholar_%d"><td width="60"><input type="text" name="brethren_num_study[%d]"id="brethren_num_study_%d" size="5" /> </td><td width="120"> <input type="text" name="brethren_sex_study[%d]" id="brethren_sex_study_%d" size="10" /> </td><td width="120"> <input type="text" name="brethren_old_study[%d]" id="brethren_old_study_%d" size="5" /> </td> <td width="120"> <input type="text" name="brethren_year_study[%d]" id="brethren_year_study_%d" size="20" /> </td> <td width="120"> <input type="text" name="brethren_school_study[%d]" id="brethren_school_study_%d" size="20" /> </td> </tr>';
var now_scholar = parseInt($(".scholar").length);
if(now_scholar < cnt){
for(a=now_scholar+1; a<=cnt; a++){
$("tbody").append(template.replace(/%d/g,a));
}
}
else if(now_scholar > cnt){
for(a=cnt+1; a<=now_scholar; a++){
$("#scholar_"+a).remove();
}
}
});
});
</script>
<label >สมาชิกที่อายุต่ำกว่า 20</label><input name="cnt" type="text" size="2" maxlength="1" id="one"/><br />
<table border="1" width="550">
<tbody >
<tr id="a">
<th width="37"><div align="center">คนที่</div></th>
<th width="69"><div align="center">เพศ</div></th>
<th width="34"><div align="center">อายุ</div></th>
<th width="39"><div align="center">ชั้นปี</div></th>
<th width="337"><div align="center">สถานที่การศึกษา</div></th>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("[name=cnt2]").keyup(function(){
var cnt2 = parseInt($(this).val()), i=0;
var temp = '<tr class="scho" id="scho_%d"><td width="60"><input type="text" name="brethren_num_work[%d]"id="brethren_num_work_%d" size="4" /> </td><td width="120"> <input type="text" name="brethren_sex_work[%d]" id="brethren_sex_work_%d" size="8" /> </td><td width="120"> <input type="text" name="brethren_old_work[%d]" id="brethren_old_work_%d" size="4" /> </td> <td width="120"> <input type="text" name="brethren_woot_work[%d]" id="brethren_woot_work_%d" size="8" /> </td> <td width="120"> <input type="text" name="brethren_workplace[%d]" id="brethren_workplace_%d" size="20" /> </td> <td width="120"> <input type="text" name="brethren_revenue_work[%d]" id="brethren_revenue_work_%d" size="15" /> </td> </tr>';
var now_scho = parseInt($(".scho").length);
if(now_scho < cnt2){
for(i=now_scho+1; i<=cnt2; i++){
$("table thead").append(temp.replace(/%d/g,i));
}
}
else if(now_scho > cnt2){
for(i=cnt2+1; i<=now_scho; i++){
$("#scho_"+i).remove();
}
}
});
});
</script>
<label >สมาชิกที่อายุมากกว่า 20</label><input name="cnt2" type="text" size="2" maxlength="1" id="two" /><br />
<table border="1" width="550">
<thead >
<th width="30"><div align="center">คนที่</div></th>
<th width="60"><div align="center">เพศ</div></th>
<th width="30"><div align="center">อายุ</div></th>
<th width="90"><div align="center">วุฒิการศึกษา</div></th>
<th width="120"><div align="center">สถานที่ทำงาน</div></th>
<th width="86"><div align="center">รายได้เดือนละ</div></th>
<tr>
</thead>
</table>
</form>
พอดีผมอยากได้ สองตารางนี้ ไป ใช้ อะ คับ แต่เอาไปใช้ร่วมกับตารางอื่น มันมีปัญหาพังทั้งเว็บเลย ควรแก้ไขยังไง คับ ต้องอ้าถึงอยังไงที่จะไม่กระทบตารางอื่นอะคับ
ถ้าไม่อยากมีปัญหา ก็ต้องกำหนด id หรือ name ไม่ให้ซ้ำกันครับ ในแต่ละตาราง และ ต้องกำหนดให้ ตาราง และ Javascript ต้องสัมพันธ์กันด้วยครับ เช่น ในตัวอย่าง จะมี name=cnt และ name=cnt2