ถามเรื่องของ jquery table row with auto populating ajax or jquery หน่อยครับ
คือ ผมจะทำหน้ากรอกข้อมูลแบบหลาย record เหมือนใน excel แหละครับCode (JavaScript)
$(document).ready(function(){
// -- Clone table rows
$(".cloneTableRows").live('click', function(){
// this tables id
var thisTableId = $(this).parents("table").attr("id");
// lastRow
var lastRow = $('#'+thisTableId + " tr:last");
// clone last row
var newRow = lastRow.clone(true);
// append row to this table
$('#'+thisTableId).append(newRow);
// make the delete image visible
$('#'+thisTableId + " tr:last td:first img").css("visibility", "visible");
// clear the inputs (Optional)
$('#'+thisTableId + " tr:last td :input").val('');
$('#'+thisTableId + " tr:last td :select").val('');
return false;
});
Code (JavaScript)
function list(tagNext, val, tagName) {
$.getJSON('prvModule.php', { name: tagName, value: val }, function(data) {
var select = $(tagNext);
var options = select.attr('options');
$('option', select).remove();
var opt = '<option value="0"> --- ไม่ระบุ --- </option>';
$(select).append(opt);
$.each(data, function(index, array) {
$(select).css("display","inline");
$(select).append('<option value="' + array[0] + '">' + array[1] + '</option>');
});
});
}
Code [...table ..]
<select id="zone" name="zone[]" onChange="list('#province',this.value,'zone')">
<option value="0"> --- ไม่ระบุ --- </option>
<?php
$strSQL = "SELECT * FROM geography";
$objQuery = mysql_db_query($db_name, $strSQL) or die(mysql_error());
while($rows = mysql_fetch_array($objQuery)) {
$geo_id = $rows["GEO_ID"];
$geo_name = $rows["GEO_NAME"];
echo "<option value='$geo_id'> $geo_name </option>";
}
?>
</select>
</td>
<td>
<select id="province" name="province[]" class="prvMode">
<!-- <option></option> -->
</select>
[../table...]
Tag PHP, HTML/CSS, JavaScript, Ajax, jQuery
Date :
2012-11-27 11:05:18By :
iloveyoukissView :
1760Reply :
8
id เค้าห้ามซ้ำกันครับ การแก้ไขที่ง่ายที่สุดน่าจะเป็นการปรับเปลี่ยนไปใช้ class แทนทดลองดูน่ะครับ <select id="zone" name="zone[]" onChange="list($(this).next('.province'),this.value,'zone')">
<option value="0"> --- ไม่ระบุ --- </option>
<?php
$strSQL = "SELECT * FROM geography";
$objQuery = mysql_db_query($db_name, $strSQL) or die(mysql_error());
while($rows = mysql_fetch_array($objQuery)) {
$geo_id = $rows["GEO_ID"];
$geo_name = $rows["GEO_NAME"];
echo "<option value='$geo_id'> $geo_name </option>";
}
?>
</select>
</td>
<td>
<select class="province" name="province[]" class="prvMode">
<!-- <option></option> -->
</select>
Date :
2012-11-27 11:18:24By :
sakuraei
ผมก็เคยเปลี่ยนเป็น class เหมือนกันแต่ไปต่อไม่ถูก ช่วยแนะนำหน่อยครับ ไม่ค่อยสันทัด jquery แบบว่าไม่เคยใช้มาก่อนเลยครับCode (PHP) <select id="zone" name="zone[]" onChange="list('.province',this.value,'zone')">
<option value="0"> --- ไม่ระบุ --- </option>
<?php
$strSQL = "SELECT * FROM geography";
$objQuery = mysql_db_query($db_name, $strSQL) or die(mysql_error());
while($rows = mysql_fetch_array($objQuery)) {
$geo_id = $rows["GEO_ID"];
$geo_name = $rows["GEO_NAME"];
echo "<option value='$geo_id'> $geo_name </option>";
}
?>
</select>
</td>
<td>
<select class="province" name="province[]" >
<!-- <option></option> -->
</select>
ประวัติการแก้ไข
Date :
2012-11-27 11:36:51By :
iloveyoukiss
list($(this).next('.province'),this.value,'zone')
Date :
2012-11-27 11:50:20By :
sakuraei
เดียวลองก่อนนะครับ
Date :
2012-11-27 12:57:16By :
iloveyoukiss
นิ่งเบยยยครับ
Date :
2012-11-27 13:15:04By :
iloveyoukiss
เอาไปประยุกต์ใช้ดูน่ะครับ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>https://www.thaicreate.com/php/forum/087302.html</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Unidentifier">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script>
$(document).ready(function(){
$(".zone").change(function(){
var innerOption = "<option value='3'>Just JQuery is enough</option>";
$(this).parents().next("td").find(".province").append(innerOption);
alert($(this).parents().next("td").find(".province option:selected").text());
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select class="zone" name="zone[]">
<option value="0"> --- ไม่ระบุ --- </option>
<option value="1">hello</option>
<option value="2">World</option>
</select>
</td>
<td>
<select class="province prvMode" name="province[]">
<option>Haha</option>
<option selected>Haehe</option>
</select>
</td>
</tr>
</table>
Date :
2012-11-28 12:38:37By :
sakuraei
ขอบคุณครับ
Date :
2012-11-28 13:11:43By :
iloveyoukiss
ถ้าแก้ปัญหาได้แล้ว กลับเอาโค้ดมาลงไว้เพื่อเป็นวิทยาทานแด่คนอื่นด้วยน่ะครับ
Date :
2012-11-28 13:13:13By :
sakuraei
Server 00
Load balance : Server 00
