Question

我从数据库表中提取信息并将其放入HTML表格中。我想允许用户点击表格中的数字并进行编辑。我使用jquery来制作一个单击事件，但是当我使用<textarea>时，它会放大单元格并弄乱整个表格的外观。我已经尝试了<input>并且它也是这样做的。表格单元本身可以变成输入的任何方式？这是2个屏幕截图，第一个是表格，第二个是显示添加输入时表格如何倾斜。
Screenshot of Table
Screenshot of Table with Textarea

问题是编辑文本的最佳选择是什么。 <textarea>使得单元格更大，老实说它看起来很难看...... contenteditable并没有从IE的声音中使用IE，这会使它失去作为选项的资格。我的最终目标是在输入后将值保存回数据库，这就是我尝试使用jquery进行点击的原因，因此可以很容易地添加更多代码，然后将文本重新发送回数据库

<?php
    include("connection.php");
    $query= "SELECT * FROM schedule";
    $result = mysqli_query($link, $query);
    $scheduletext="<table>";
    if($result = mysqli_query($link, $query)) {
        $b=1;
        while ($row=mysqli_fetch_array($result)) {
            $scheduletext.="<tr>";
            $a=1;
            while($a< mysqli_num_fields($result)) {
                if(($a == 1)and ($b == 1)){
                    $scheduletext.="<th></th>";
                } else {
                    if (($a == 1) or ($b == 1)) {
                        $scheduletext.="<th>".$row[$a]."</th>";
                    } else {
                        $scheduletext.="<td>".$row[$a]."</td>";   
                    }
                }
                $a++;
            }
            $scheduletext.="</tr>";
            $b++;
        }
    }
    $scheduletext=$scheduletext."</table>";
?>
<html>
  <head>
    <title>TastySnack - Production Schedule</title>
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">   
    <link rel="stylesheet" type="text/css" href="tasty.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div id="top">
        <div id="top-left">
            TastySnack Production
        </div>
        <div id="top-right">
            <img id="logo" src="images/TastysnackLogo.jpg">
        </div>
    </div>
    <div id="split"></div>
    <div id="schedule">
        <?php 
            print_r($scheduletext);
        ?> 
        <div id="new"></div>
    </div>
    <script type="text/javascript">
        $("td").click(function(){
            $(this).html("<textarea>");
        });
    </script>
  </body>
</html>

Answer 1

只包括满足的

进入你希望内容可编辑的地方

 <td contenteditable>hello world</td>

这是一个演示：https://jsfiddle.net/3eav7mLv/

Answer 2

您可以使用jquery表编辑。 http://markcell.github.io/jquery-tabledit/#examples 用于编辑和删除。

下载并包含js表格编辑文件。

使用以下示例中的代码：

$('#example3').Tabledit({ 
url: 'example.php',
editButton: false,
deleteButton: false,
hideIdentifier: true,
columns: {
    identifier: [0, 'id'],
    editable: [[2, 'firstname'], [3, 'lastname']]
}});

其中

使用example.php

可以是具有某种逻辑的控制器路径。

Answer 3

只需在<textarea>代码

中加入<input type="text">或<td>代码

<td><textarea rows="4" cols="50">Content here</textarea></td>

使html表元素可编辑

3 个答案: