使 HTML 表元素<td></td>可编辑

我从数据库表中提取信息并将其放入HTML表中。我想让用户点击表中的数字，并能够编辑它。我使用jquery来创建一个事件，但是当我使用<textarea>时，它放大了单元格，弄乱了整个表的外观。我试过<input>，它也一样。有没有办法把表格单元格本身变成输入?这里有两个截图，第一个是表格，第二个显示了当添加输入时表格是如何倾斜的。
表格截图
带有Textarea的表格截图

问题是我编辑文本的最佳选择是什么。<textarea>使细胞变大，老实说，它看起来很丑…从声音上看，contenteditable不能与IE一起工作，这使它无法作为一个选项。我的最终目标是将值保存回数据库也进入后，这就是为什么我尝试用jquery点击，所以很容易添加更多的代码拍摄文本回DB之后

<?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>

只包含contentitable

放到你想要编辑的地方

 <td contenteditable>hello world</td>

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

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

使用示例中的代码:

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

在

example.php

在<td>标签中包含<textarea>或<input type="text">标签

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

相关内容

最新更新

热门标签：