Dinamis Combox Dalam Tabel Transaksi

Santiago Demitrio · Jun 16, 2011
mohon pecerahanya

saya dapat contoh program Add/Remove rows from table having Drop Down List di sini
http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

nah rencananya isi dari drop down list nya mau saya ambilkan data dari database dan di buat seperti contoh yang ada di sini http://ask.myphptutorials.com/questions/view/104

saya sudah coba buat scriptnya spt ini
 
<SCRIPT language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 2) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
            }
            }catch(e) {
                alert(e);
            }
        }
 
    </SCRIPT>		
 
<table id="items">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
	   <TABLE id="dataTable"  border="0">
	    <tr class="header">
    	  	  <th class="no">No</th>
		      <th class="kode">Kode </th>
		      <th class="skcd">Nama Barang</th>			       			       
			  <th class="sat">Satuan</th>
		      <th class="jml">Jumlah</th>			       			       
		</tr>	
		<TR>
            <TD><INPUT type="checkbox" name="chk[]"/></TD>
            <TD><INPUT type="text" name="txtKode[]" id="txtKode_id[]"/></TD>
           	<?php 
			
			echo '<td >';			
    				 $result = mysql_query("select * from tabelsukucadang");
					 $jsArray = "var arrayNamaBarang= new Array();\n";    
					 echo '<select name="cmbBarang[]" id="cmbBarangId[]" onchange="changeValue(this.value)">';    
					 echo '<option>-Pilih Barang-</option>';    
					 while ($row = mysql_fetch_array($result)) 
					 {    
					 echo '<option value="' . $row['ID'] . '">' . $row['NAMA_BRG'].'</option>';    
					 $jsArray .= "arrayNamaBarang['" . $row['ID'] . "'] = {Kode:'" . addslashes($row['KODE_BRG']) . "',Satuan:'".addslashes($row['SATUAN'])."'};\n";    
					 }    
					 echo '</select>';    			 
								
					echo '<script type="text/javascript">';    
					echo $jsArray;
					echo 'function changeValue(id)';
					echo '{ '; 
						echo 'document.getElementById("txtKode_id[]").value = arrayNamaBarang[id].Kode; '; 
						echo 'document.getElementById("txtSatuan_id[]").value = arrayNamaBarang[id].Satuan; ';
					echo '}; '; 
					echo '</script>';	
				
				echo '</td>';			
			 ?>
			<TD><INPUT type="text" name="txtSatuan[]" id="txtSatuan_id[]"/></TD>
			<TD><INPUT type="text" name="txtJumlah[]"/></TD>
		</TR>	
	</TABLE>		
</table>
</form>


nah yg terjadi
1. drop down list di baris pertama di pilih maka text box di sebelah tampilannya sesuai dengan yang data yg ada di database.

2. drop down list di baris ke dua di pilih tp yang berubah textbox di baris pertama bkn di text box yang sesuai dengan baris drop down list yang di pilih.

trus gimana caranya biar textbox nya berubah sesuai dgn baris drop down list yg dipilih ya??
Silahkan login untuk menjawab!
0
Ellyx Christian · Jun 16, 2011 · 0 Suka · 0 Tidak Suka
cara paling gampang adalah menggunakan jquery seperti ini:
<TABLE id="dataTable" border="0">
	 <tr class="header">
 	 	 <th class="no">No</th>
		 <th class="kode">Kode </th>
		 <th class="skcd">Nama Barang</th>			 			 
			 <th class="sat">Satuan</th>
		 <th class="jml">Jumlah</th>			 			 
		</tr>	
		<TR>
 <TD><INPUT type="checkbox" name="chk[]"/></TD>
 <TD><INPUT type="text" name="txtKode[]" id="txtKode_id[]"/></TD>
 	<?php 
 
			echo '<td >';			
 				 $result = mysql_query("select * from tabelsukucadang");
					 $jsArray = "var arrayNamaBarang= new Array();\n"; 
					 echo '<select name="cmbBarang[]" id="cmbBarangId[]">'; 
					 echo '<option>-Pilih Barang-</option>'; 
					 while ($row = mysql_fetch_array($result)) 
					 { 
					 echo '<option value="' . $row['ID'] . '">' . $row['NAMA_BRG'].'</option>'; 
					 $jsArray .= "arrayNamaBarang['" . $row['ID'] . "'] = {Kode:'" . addslashes($row['KODE_BRG']) . "',Satuan:'".addslashes($row['SATUAN'])."'};\n"; 
					 } 
					 echo '</select>';	
				echo '</td>';			
			 ?>
			<TD><INPUT type="text" name="txtSatuan[]" id="txtSatuan_id[]"/></TD>
			<TD><INPUT type="text" name="txtJumlah[]"/></TD>
		</TR>	
</TABLE>
<!-- menambahkan jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
<?php echo $jsArray;?>
$(function(){
	$("#dataTable select").change(function(){
		var id = $(this).val();
		$(this).parent().prev().find('input').val(arrayNamaBarang[id].Kode);
		$(this).parent().next().find('input').val(arrayNamaBarang[id].Satuan);
	});
});
</script>
?>
0
Santiago Demitrio · Jun 18, 2011 · 0 Suka · 0 Tidak Suka
sdd sy coba mas tp belum berhasil,
hasilnya gini
1. klo drop down list baris 1 di ubah maka text box baris 1 tampilannya bisa muncul & sesuai yg di database (bagian ini sukses)

2. klo drop down list baris 2 di ubah maka text box baris 1 tampilannya masih tetap sama sesuai dengan drop down list baris 1, (klo di script sebelumnya ikut berubah) (bagian ini sukses)

3. klo drop down list baris 2 di ubah maka text box baris 2 tidak ada peruabahan, ttp kosong.
seharusnya hasilnya sama persis spt di hasil No.1. (ini yg blm sukses)
0
Ellyx Christian · Jun 18, 2011 · 0 Suka · 0 Tidak Suka
maaf saya lupa kalau baris berikutnya dibentuk dinamis oleh javascript juga. Jadi bagian javascript yang saya kasi diganti menjadi seperti ini:
<script type="text/javascript">
<?php echo $jsArray;?>
function addActionToSelect(){
	$("#dataTable select").unbind();
	$("#dataTable select").change(function(){
		var id = $(this).val();
		$(this).parent().prev().find('input').val(arrayNamaBarang[id].Kode);
		$(this).parent().next().find('input').val(arrayNamaBarang[id].Satuan);
	});
}
$(function(){
	addActionToSelect();
});
</script>
dan pada function yang kamu buat yaitu function addRow() tambahkan addActionToSelect(); pada bagian akhir function.
0
Santiago Demitrio · Jun 18, 2011 · 0 Suka · 0 Tidak Suka
sudah sya coba mas, masih blm berhasil.
yang No.1 td kan dah sukses tp sekarang jd ga sukses, di text box baris pertama tidak mucul datanya.

nambah addActionToSelect(); spt ini kan?
function addRow(tableID) 
{
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
 
		for(var i=0; i<colCount; i++) 
		{
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) 
			{
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
           		 }
        	}
     addActionToSelect();
}
0
Ellyx Christian · Jun 18, 2011 · 0 Suka · 0 Tidak Suka
saya sudah coba dan berhasil.
jangan lupa untuk menambahkan jquery-nya:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

coba juga kamu install firebug untuk debuging javascript
0
Santiago Demitrio · Jun 20, 2011 · 0 Suka · 0 Tidak Suka
Oo..iya, sori mas yang itu lupa ditambahkan
skrg sudah bisa, trimakasih banyak ya mas ats bantuannya. :)
0
newbiephp · May 5, 2016 · 0 Suka · 0 Tidak Suka
mohon pencerahannya mas,

saya mempunyai kasus yg sama dengan mas santiago tadi sudah nyoba sintak javasriptnya namun belum berhasil

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var colCount = table.rows[0].cells.length;

for(var i=0; i<colCount; i++) {

var newcell = row.insertCell(i);

newcell.innerHTML = table.rows[1].cells.innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
addActionToSelect();
}
function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
            addActionToSelect();
        }