将数据从HTML表格复制到另一个HTML页面
我不是一个完整的菜鸟，但我没有超过几个月的经验HTML任何帮助都会受到赞赏。我有一个网页，显示一个包含多列和多行的表。我在每行的末尾都有一个Edit链接，它会将您带到另一个页面，该页面应该可以使行中的数据可编辑。我可以创建第一页，链接将我带到另一个页面，但我无法弄清楚如何从第一页的表行获取数据并将其放入第二页的表中。我希望它从一个选中1行的表转到第一个表中每个列的2列和1行的表。
这是包含表格的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing PHP</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<!--h2>This will pull down all the Names from the QDef table</h2-->
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
<p>4 Results</p>
<table class="tab"id="NameTable">
<thead>
<tr>
<th class="cell">Edit</th>
<th class="cell">TempID</th>
<th class="cell">Name</th>
<th class="cell">CountryCode</th>
<th class="cell">Budget</th>
<th class="cell">Used</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td>
<a Href="#" data-id="1" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>1</td>
<td contenteditable>Win Temp</td>
<td contenteditable>TH</td>
<td contenteditable>1000000.000000000</td>
<td contenteditable>60000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row">
<td>
<a Href="#" data-id="2" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>2</td>
<td contenteditable>Test Temp</td>
<td contenteditable>UK</td>
<td contenteditable>100000.000000000</td>
<td contenteditable>5000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row1">
<td>
<a Href="#" data-id="3" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>3</td>
<td contenteditable>Number 3</td>
<td contenteditable>UK</td>
<td contenteditable>1000000.000000000</td>
<td contenteditable>50000.000000000</td>
</tr>
</tbody>
<tbody>
<tr class="row">
<td>
<a Href="#" data-id="4" data-target="TempIDColumn" onclick="window.open('FormToEditMaterial.php','FormToEditMaterial');">Edit</a>
</td>
<td contenteditable>4</td>
<td contenteditable>Number 4</td>
<td contenteditable>US</td>
<td contenteditable>50000.000000000</td>
<td contenteditable>.000000000</td>
</tr>
</tbody>
</table>
<br/>
</body>
</html>
这里的页面应该允许我编辑第一页表格中的数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FormToEditMaterial</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<table id="FormToEditMaterialTable">
<tr>
<th contenteditable="false" >Field Name</th>
<th contenteditable="false">Field to be edited</th>
</tr>
<tr contenteditable>
<td id="TempIDColumn" contenteditable="false">Name of Field</td>
<td>Data to be updated</td>
</tr>
<tr contenteditable>
<td id="NameColumn" contenteditable="false">Name of field 2</td>
<td>Data 2 to be updated</td>
</tr>
<tr contenteditable>
<td id="CountryCodeColumn" contenteditable="false">Name of field 3</td>
<td>Data 3 to be updated</td>
</tr>
<tr contenteditable>
<td id="BudgetColumn" contenteditable="false">Name of field 4</td>
<td>Data 4 to be updated</td>
</tr>
<tr contenteditable>
<td id="UsedColumn" contenteditable="false">Name of field 5</td>
<td>Data 5 to be updated</td>
</tr>
</table>
<br/>
<input type="button" name="SubmitUpdate" class="ok" value="Submit Update"/>
</body>
</html>
我已经看到人们使用表单和$POST将数据从一个页面移到另一个页面，但我没有使用表单。我实际上正在使用PHP，这是结果HTML以及从SQL服务器中提取的内容。但是，我需要帮助才能在HTML中使用此功能，我将弄清楚如何将其转换为PHP。以下是我与之合作的文件：
JSFiddle TestingPHP - First Table
JSFiddle FormToEditMaterial - Second Table
如果您需要更多信息，请告诉我，我会尽我所能。
修改 这是更新的FormToEditMaterial文件，我没有更新JSFiddle：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FormToEditMaterial</title>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<table id="FormToEditMaterialTable">
<tr>
<th contenteditable="false" >Field Name</th>
<th contenteditable="false">Field to be edited</th>
</tr>
<tr contenteditable>
<td id="TempIDColumn" contenteditable="false">Name of Field</td>
<td>Data to be updated</td>
</tr>
<tr contenteditable>
<td id="NameColumn" contenteditable="false">Name of field 2</td>
<td>Data 2 to be updated</td>
</tr>
<tr contenteditable>
<td id="CountryCodeColumn" contenteditable="false">Name of field 3</td>
<td>Data 3 to be updated</td>
</tr>
<tr contenteditable>
<td id="BudgetColumn" contenteditable="false">Name of field 4</td>
<td>Data 4 to be updated</td>
</tr>
<tr contenteditable>
<td id="UsedColumn" contenteditable="false">Name of field 5</td>
<td>Data 5 to be updated</td>
</tr>
</table>
<br/>
<input type="button" name="SubmitUpdate" class="ok" value="Submit Update"/>
<br/>
<br/>
<form>
TempID: <input type="text" name="1"><br>
Name: <input type="text" name="2"><br>
CountryCode: <input type="text" name="3"><br>
Budget: <input type="text" name="4"><br>
Used: <input type="text" name="5"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
编辑2
这是新的FormToEditMaterial.php：
<?php
$servername = "ServerName";
$username = "User";
$password = "Password";
$dbname = "DBName";
$db = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
$row = array();
if (isset($_POST['submit']))
{
$row = $_POST;
$q = 'UPDATE dbo.MyTable SET Name = ?, CountryCode = ?, Budget = ?, Used = ? WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(array($row['Name'], $row['CountryCode'], $row['Budget'], $row['Used'], $row['TempID']));
print_r($db->errorInfo());
echo "<br>";
var_dump($sth);
echo "<br>";
var_dump($row);
if ($sth->rowCount() == 1) header('Location: Index.php');
}
else if (!empty($_GET['id']))
{
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(array($_GET['id']));
$row = $sth->fetch();
}
else
{
// Show error message here
}
?>
<link rel="StyleSheet" href="stylesheet.css" type="text/css">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<p>
<label>TempID:
<input type="text" name="TempID" value="<?php echo $row['TempID']?>"></label>
</p>
<p>
<label>Name:
<input type="text" name="Name" value="<?php echo $row['Name']?>"></label>
</p>
<p>
<label>CountryCode:
<input class="CountryCode" type="text" name="CountryCode" value="<?php echo $row['CountryCode']?>"></label>
</p>
<p>
<label>Budget:
<input type="text" name="Budget" value="<?php echo $row['Budget']?>"></label>
</p>
<p>
<label>Used:
<input type="text" name="Used" value="<?php echo $row['Used']?>"> </label>
</p>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>
这是Index.php：
<?php
$servername = "ServerName";
$username = "User";
$password = "Password";
$dbname = "DBName";
$db = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable';
?>
<link rel="StyleSheet" href="stylesheet.css" type="text/css">
<table>
<thead>
<tr>
<th>Edit</th>
<th>TempID</th>
<th>Name</th>
<th>CountryCode</th>
<th>Budget</th>
<th>Used</th>
</tr>
</thead>
<tbody>
<?php foreach ($db->query($q) as $row) :?>
<tr>
<td><a href="FormToEditMaterial.php?id=<?php echo $row['TempID']?>">Edit</a></td>
<td><?php echo $row['TempID']?></td>
<td><?php echo $row['Name']?></td>
<td><?php echo $row['CountryCode']?></td>
<td><?php echo $row['Budget']?></td>
<td><?php echo $row['Used']?></td>
</tr>
<?php endforeach?>
</tbody>
</table>
2 个答案:
答案 0 :(得分：1)
我做了一个简单的例子：
在 index.php ：
<?php
$db = new PDO('host', 'username', 'password');
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable';
?>
<table>
<thead>
<tr>
<th>Edit</th>
<th>TempID</th>
<th>Name</th>
<th>CountryCode</th>
<th>Budget</th>
<th>Used</th>
</tr>
</thead>
<tbody>
<?php foreach ($db->query($q) as $row) :?>
<tr>
<td><a href="FormToEditMaterial.php?id=<?php echo $row['TempID']?>">Edit</a></td>
<td><?php echo $row['TempID']?></td>
<td><?php echo $row['Name']?></td>
<td><?php echo $row['CountryCode']?></td>
<td><?php echo $row['Budget']?></td>
<td><?php echo $row['Used']?></td>
</tr>
<?php endforeach?>
</tbody>
</table>
在 FormToEditMaterial.php ：
<?php
$db = new PDO('sqlite:db.sqlite3');
$row = array();
if (isset($_POST['submit']))
{
$row = $_POST;
$q = 'UPDATE MyTable SET Name = ?, CountryCode = ?, Budget = ?, Used = ? WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(
array($row['Name'], $row['CountryCode'], $row['Budget'], $row['Used'], $row['TempID'])
);
if ($sth->rowCount() == 1) header('Location: index.php');
}
else if (!empty($_GET['id']))
{
$q = 'SELECT TempID, Name, CountryCode, Budget, Used FROM MyTable WHERE TempID = ?';
$sth = $db->prepare($q);
$sth->execute(array($_GET['id']));
$row = $sth->fetch();
}
else
{
// Show error message here
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<p>
<label>TempID:
<input type="text" name="TempID" value="<?php echo $row['TempID']?>"></label>
</p>
<p>
<label>Name:
<input type="text" name="Name" value="<?php echo $row['Name']?>"></label>
</p>
<p>
<label>CountryCode:
<input type="text" name="CountryCode" value="<?php echo $row['CountryCode']?>"></label>
</p>
<p>
<label>Budget:
<input type="text" name="Budget" value="<?php echo $row['Budget']?>"></label>
</p>
<p>
<label>Used:
<input type="text" name="Used" value="<?php echo $row['Used']?>"></label>
</p>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>
此示例不包含任何错误检查。
答案 1 :(得分：0)
Ajax是您的问题的一个很好的解决方案，因为您不需要跳转到辅助页面，甚至不需要刷新页面！下一个代码就是一个例子，它的工作原理如下：
- HTML表格中的每一行都有一个按钮来保存更改。
- 每个按钮的click事件都会调用带有数据值的ajax函数。
- ajax函数调用“update.php”，数据值为POST参数。
- “update.php”将数据作为$ _POST值获取并更新数据库记录。
- “update.php”将成功消息发送回ajax函数以显示它。
为了测试它，创建两个具有给定名称的文件，复制粘贴下一个代码并运行！ （除了那些代码，你不需要任何其他东西）。
<强> main.php
<html>
<head>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript">
//--------------------------------------------------
function myAjax ( id )
{ if ( ! confirm( "Save data for id=" + id + " ?" ) )
return;
$.ajax( { type : 'POST',
url : 'update.php',
data : { 'id' : id,
'name' : $("#name"+id).val(), // VALUE FROM EDIT FIELD.
'phone' : $("#phone"+id).val(), // VALUE FROM EDIT FIELD.
},
success : function ( result )
{ alert( result ); },
error : function ( xhr )
{ alert( "error" ); }
}
);
}
//--------------------------------------------------
</script>
</head>
<body>
<table>
<tr><td>NAME</td>
<td>PHONE</td>
<td></td>
</tr>
<?php
//--------------------------------------------------
// SAMPLE DATA.
$database = Array( Array( "id" => "1",
"name" => "Mike",
"phone" => "123" ),
Array( "id" => "2",
"name" => "Midas",
"phone" => "456" ),
Array( "id" => "3",
"name" => "Jay",
"phone" => "789" )
);
$i = 1;
foreach ( $database as $row ) // DISPLAY "DATABASE" ROWS.
{ echo "<tr><td><input type='text' id='name" . $row["id"] .
"' value='" . $row["name"] . "'/></td>\n" .
" <td><input type='text' id='phone" . $row["id"] .
"' value='" . $row["phone"] . "'/></td>\n" .
" <td><button onclick='myAjax(\"" . $row["id"] .
"\")'>Save changes</button></td>\n" .
"</tr>";
$i++;
}
//--------------------------------------------------
?>
</table>
</body>
</html>
<强> update.php
<?php
// CHECK IF VALUES ARE COMING FROM AJAX.
if ( isset( $_POST[ "id" ] ) &&
isset( $_POST[ "name" ] ) &&
isset( $_POST[ "phone" ] ) )
{ // "update my_table set name=$_POST[ "name" ],
// phone=$_POST[ "phone" ]
// where id=$_POST[ "id" ]
echo "Record " . $_POST[ "id" ] . " updated with " .
$_POST[ "name" ] . " and " . $_POST[ "phone" ];
}
?>
糟糕！刚刚解决了一个小问题，准备好了！
如果右键单击该网页以查看代码，您会注意到输入字段包含ID“name1”，“name2”，...和“phone1”，“phone2”，.... method为每个文本框提供一个唯一的id（ajax函数需要获取用户输入的值并将其发送给PHP）。负责此的代码是：
id='name" . $row["id"] .
"' value=
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？