如何在 textarea 中显示选定行的数据答案

【问题标题】：How can i display data from selected row in textarea如何在 textarea 中显示选定行的数据
【发布时间】：2020-11-10 03:43:03
【问题描述】：

我正在尝试用 html 学习 php，我决定创建一个项目。现在，我被困在我想在文本区域上显示数据的地方。我创建了一个名为“company”的数据库，其中包含“login”表和“id”、“password”和“username”列。

当我在选择选项菜单中选择一个选项时，“id”、“密码”和“用户名”列中的数据会显示在表格中。我想要实现的是，当我单击一行时，“问题”列中的数据显示在文本区域中，该文本区域描述了带有解释的情况。

我不知道怎么写，但语法应该是这样的：Select 'problem' from login WHERE id='selected row id' 我在我的 php 上创建了一个选择案例女巫工作正常。我唯一的问题是当我单击特定行以在 textarea 上显示数据时，我不知道如何选择 id。

到目前为止，这是我的代码：

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8"/>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="formulaire.css"/>
<!--<script type="text/javascript" src="select1.js"></script>-->



<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->

<style>
table tr:not(:first-child){
cursor: pointer;transition: all .25s ease-in-out;
}
table tr:not(:first-child):hover{background-color: #ddd;}
</style>



  
</head>

<body>

<div id="form">

<form action="#" method="post">

<label>Veuillez choisir une option :</label>
<select id="choix" name="choixtest">
  <option value="tous">tous</option>
  <option value="id">id</option>
  <option value="username">username</option>
  <option value="password">password</option>
 </select>
 
<input type="submit" name="submit" value="Get Selected Values" />

 <table id="table">
 	
 <?php
		
	/* Attempt MySQL server connection. Assuming you are running MySQL
	server with default setting (user 'root' with no password) */
	$link = mysqli_connect("localhost", "root", "", "company");
 
	// Check connection
	if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
	}
 
	// Attempt select query execution
	$sql = "SELECT * FROM login";


	if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        echo "<table>";
            echo "<tr>";
                echo "<th>id</th>";
                echo "<th>username</th>";
                echo "<th>password</th>";
            echo "</tr>";
       if(isset($_POST['submit'])){
		   $selected_val = $_POST['choixtest'];  // Storing Selected Value In Variable

		   
		    while($row = mysqli_fetch_array($result)){
				
				switch($_POST['choixtest']){
					
				case 'tous':
				echo "<tr>";
        echo "<td>" . $row['id'] . "</td>";
        echo "<td>" . $row['username'] . "</td>";
        echo "<td>" . $row['password'] . "</td>";
        echo "</tr>";	
				break;	
					
				case 'id':
				echo "<tr>";
        echo "<td>" . $row[$selected_val] . "</td>";
        echo "<td>" . "</td>";
        echo "<td>"  . "</td>";
        echo "</tr>";	
				break;
								
				case 'username':
				echo "<tr>";
        echo "<td>" . "</td>";
        echo "<td>" . $row[$selected_val] . "</td>";
        echo "<td>"  . "</td>";
        echo "</tr>";	
  			break;
				
				case 'password':
				echo "<tr>";
        echo "<td>" . "</td>";
        echo "<td>" . "</td>";
        echo "<td>"  . $row[$selected_val] .  "</td>";
        echo "</tr>";			
				break;
				
				default:
					// Something went wrong or form has been tampered.
				}
					
				            
        }
			

        }
        echo "</table>";
        // Free result set
        mysqli_free_result($result);
    } else{
        echo "No records matching your query were found.";
    }
	} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
	}
 
	// Close connection
	mysqli_close($link);
	?>
</table>
	
			
<textarea id="erreur" rows="20" cols="100"></textarea>

</form>


</div>

</body>
</html>

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

对于带有<table id="myTable">的表，将第一列值放入定义为的文本框中

<input type="text" placeholder="Customer Name" id="cus_name">

可以添加以下js代码。

<script>
var table = document.getElementById('myTable');        
    for(var i = 1; i < table.rows.length; i++)
    {
        table.rows[i].onclick = function()
        {
            document.getElementById("cus_name").value = this.cells[0].innerHTML;
        };
    }                                                                         
</script>

这里cus_name 是文本字段的ID，而在this.cells[0] 中，值0 代表第一列。您可以相应地对其进行更改，也可以使用代码document.getElementById("cus_name").value = this.cells[0].innerHTML; 添加更多列，只需更改单元格值和文本框ID。

【讨论】：

【解决方案2】：

html 表中的每一行都必须对应于登录表中的一个 id。您必须在行中的某处放置与该行相对应的 id。您可以通过多种方式实现这一目标。一种方法是使用 data-something 属性来放置 id，例如

<tr data-id="<?php echo $current_row['id']; ?>">  
    <td>column1</td>
    <td>column2</td>
    <td>etcetera</td>
</tr>

一旦您设置了 data-id 属性，您就可以在用户每次点击该行时通过 Javascript 访问它。为此，您需要捕获行上的点击事件。我将向您展示一个使用 jQuery 的示例：

$('.myTable tr').click(function(){
    let id = $('this').data('id');
    console.log('id of selected row: ' + id);
});

现在“id”变量包含用户选择的行的 id（检查控制台输出以确保 id 是您期望的）。下一步是使用该 id 通过 Ajax 或通过常规 http 请求向服务器发出请求。如果此方法成功，我建议您进行研究，或发表另一篇文章以了解如何重新加载包含所需数据的内容的页面。由于问题越具体，被回答的机会就越高

【讨论】：