如何從點擊的HTML行表中更改輸入類型字段的值？

因此，這裏是我的全部代碼，我嘗試數據庫HTML表格連接，我想從表中的數據來改變輸入類型的值：如何從點擊的HTML行表中更改輸入類型字段的值？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>MAHASISWA</title> 
<link rel="shortcut icon" href="code.ico"> 
<style> 
    #data tr:hover{ 
    background-color: #aaa; 
    cursor: pointer; 
    } 
    #data tr:nth-child(even){ 
    background-color: #ccc; 
    } 
    #data th{ 
    background: #fff; 
    } 
</style> 
</head> 
<body style="background-color:cornsilk"> 
<form action="<?php echo "mahasiswa.php"?>" method="post"> 
    <fieldset align="center" style="border:5px solid black;margin:0px 500px"> 
    <legend>Data</legend> 
    <table> 
     <tr> 
     <td>NIM</td> 
     <td><input min="0" type="number" name="nim"></td> 
     </tr> 
     <tr> 
     <td>Nama</td> 
     <td><input type="text" name="nama"></td> 
     </tr> 
     <tr> 
     <td>Jurusan</td> 
     <td><select name="jurusan" style="width:173px"> 
      <option value="Sistem Informasi">Sistem Informasi</option> 
      <option value="Teknik Industri">Teknik Industri</option> 
      <option value="Teknik Informatika">Teknik Informatika</option> 
      <option value="Ilmu Komputasi">Ilmu Komputasi</option> 
      <option value="Sistem Komputer">Sistem Komputer</option> 
     </select></td> 
     </tr> 
     <tr> 
     <td><input type="submit" name="submit" value="INPUT"></td> 
     <td><input type="button" name="update" value="DELETE" disabled></td> 
     <td><input type="button" name="delete" value="UPDATE" disabled></td> 
     </tr> 
    </table> 
    </fieldset> 
    </form> 

<table id="data" border="1" style="margin-top:50px" align="center"> 
    <caption align="center">Tabel Data Mahasiswa</caption> 
    <tr style="text-align:center"> 
    <strong> 
    <th width="150px">NIM</th> 
    <th width="250px">Nama</th> 
    <th width="250px">Jurusan</th> 
    </strong> 
    </tr> 
     <?php 
     $conn = mysqli_connect("localhost", "root", "root", "belajar"); 
     $query = "select * from mahasiswa"; 
     $result = mysqli_query($conn, $query); 
     if($result){ 
     while($row = mysqli_fetch_row($result)){ 
      ?> 
      <tr onclick="settext(this.index)"> 
      <td><?php echo $row[0]?></td> 
      <td><?php echo $row[1]?></td> 
      <td><?php echo $row[2]?></td> 
      </tr> 
     <?php } 
     mysqli_free_result($result); 
     mysqli_close($conn); 
     } 
    ?> 
</table> 
<script> 
    function settext(x) { 
    var table = document.getElementById('id'); 
    var a = table.rows[x].cells[0].innerHTML; 
    var b = table.rows[x].cells[1].innerHTML; 
    var c = table.rows[x].cells[2].innerHTML; 
    document.getElementByName('nim').value = parseInt(a); 
    document.getElementById('nama').value = b; 
    var opt = document.createElement('option'); 
    opt.value = c; 
    opt.innerHTML = c; 
    document.getElementById('jurusan').appendChild(opt); 
    } 
</script> 
</body> 
</html>

是否有使用方法javascript，以改變這三種輸入類型與點擊行相匹配的值？

P.S：對不起，我英文不好

來源

2017-07-11 Jimly Asshiddiqy

您是否正確配置？ –

@JoeyPinto我編輯了這個問題，我附加了點擊事件 –

選擇應該做什麼？ –

試試這個， HTML代碼

<table id="data" border="1" style="margin-top:50px" align="center"> 
<caption align="center">Tabel Data Mahasiswa</caption> 
<tr style="text-align:center"> 
<strong> 
<th width="150px">NIM</th> 
<th width="250px">Nama</th> 
<th width="250px">Jurusan</th> 
</strong> 
</tr> 
<tr onclick="settext(this.rowIndex)"> 
<td>1</td> 
<td>Data2</td> 
<td>Data3</td> 
</tr> 
<tr onclick="settext(this.rowIndex)"> 
<td>4</td> 
<td>Data5</td> 
<td>Data6</td> 
</tr> 

</table> 
<input type="number" id="fordata1"> 
<input type="text" id="fordata2"> 
<select id="fordata3" style="width:173px" > 

</select>

的Javascript

function settext(x){ 
var table = document.getElementById('data'); 
var a = table.rows[x].cells[0].innerHTML; 
var b = table.rows[x].cells[1].innerHTML; 
var c = table.rows[x].cells[2].innerHTML; 
document.getElementById('fordata1').value = parseInt(a); 
document.getElementById('fordata2').value = b; 
document.getElementById('fordata3').innerText = null; 
var opt = document.createElement('option'); 
opt.value = c; 
opt.innerHTML = c; 
document.getElementById('fordata3').appendChild(opt); 
    }

JSFiddle

來源

2017-07-11 01:54:25

看看你的瀏覽器控制檯的錯誤，你的代碼中有很多錯別字。 –

看來你的回答是對的，但我什麼也沒有得到 –

你試過JS小提琴鏈接嗎？ –

試試這個

function settext(x){ 
    var tabel = document.getElementById('data'); 
    var cells = tabel.rows[x].getElementsByTagName('td'); 

    var a = cells[0].innerHTML; 
    var b = cells[1].innerHTML; 
    var c = cells[2].innerHTML; 
    document.getElementsByid('fordata1').value = a; 
    document.getElementsByid('fordata2').value = b; 
    document.getElementsByid('fordata3').value = c; 
}

來源

2017-07-11 01:31:17

不能工作 –

你可以檢查控制檯是否有任何錯誤？ –

@Haze你保留了他的錯別字。 –

-1

這是一個簡單的方法上單擊事件表格行

<table id="data" border="1" style="margin-top:50px" align="center"> 
    <caption align="center">Tabel Data Mahasiswa</caption> 
    <tr style="text-align:center"> 
    <strong> 
    <th width="150px">NIM</td> 
    <th width="250px">Nama</td> 
    <th width="250px">Jurusan</td> 
    </strong> 
    </tr> 
    <tr onclick="settext(this)"> 
    <td>Data1</td> 
    <td>Data2</td> 
    <td>Data3</td> 
    </tr> 
    <tr onclick="settext(this)"> 
    <td>Dataa</td> 
    <td>Datab</td> 
    <td>Datac</td> 
    </tr> 
</table> 

<input type="number" id="fordata1"> 
<input type="text" id="fordata2"> 
<select id="fordata3" style="width:173px"> 
</select> 

<script> 
function settext(x){ 
    var tds = x.children; 
    var a = tds[0].innerHTML; 
    var b = tds[1].innerHTML; 
    var c = tds[2].innerHTML; 
    document.getElementById('fordata1').value = a; 
    document.getElementById('fordata2').value = b; 
    document.getElementById('fordata3').value = c; 
    } 
</script>

來源

2017-07-11 02:20:23 dangmh

如何從點擊的HTML行表中更改輸入類型字段的值？

回答

相關問題