使HTML表元素</td>可編輯

-4

我從數據庫表中拉出信息並將其放置到HTML表中。我想讓用戶點擊表格中的一個數字並且能夠編輯它。我用jquery做點擊事件，但是當我使用<textarea>時，它擴大了單元格並且弄亂了整個桌子的外觀。我試過<input>，它也是這樣。任何方式，表格單元本身可以變成一個輸入？這裏有兩張截圖，第一張是表格，第二張截圖是爲了顯示添加輸入時表格如何偏斜。
Screenshot of Table
Screenshot of Table with Textarea 使HTML表元素</td>可編輯

的問題是，什麼是編輯文本我最好的選擇。 <textarea>使細胞更大，說實話，它看起來很醜陋... contenteditable無法與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>

來源

2016-10-21 Brandon

請提供實際的代碼，而不是截圖。 –

'td'和'th'是'tr'中唯一允許的子元素。另請閱讀https://stackoverflow.com/help/how-to-ask。 – connexo

是什麼問題？ –

就包括CONTENTEDITABLE

到您希望有內容編輯

<td contenteditable>hello world</td>

這裏艾威的TD是一個演示：https://jsfiddle.net/3eav7mLv/

來源

2016-10-21 11:58:51 EaBangalore

偉大的想法。就像附加使用信息一樣：http://caniuse.com/#search=contenteditable – pleinx

@pleinx，感謝您提供其他信息 – EaBangalore

不錯的選擇，但是當單元格內容發生變化時，實施onchange事件更難實現 –

只包括<textarea>或<td>標籤

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

來源

2016-10-21 12:02:47

請添加一些關於此代碼爲何幫助OP的解釋。這將有助於提供未來觀衆可以從中學習的答案。有關更多信息，請參閱[答案]。 –

您可以使用jQuery表格編輯中<input type="text">標籤。 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

都能爲您提供一些邏輯控制器的路線。

來源

2016-10-21 12:37:14

示例3將是我正在尋找，但我似乎無法弄清楚我將如何將它合併到我的代碼？我也不希望單元格大小像在示例3中單擊時那樣更改 – Brandon

使HTML表元素​​</td>可編輯

回答

相關問題

使HTML表元素</td>可編輯