Question

我正在构建一个简单的应用程序，允许用户向表中添加行并生成该表，以便用户可以在行和列中键入数据。

到目前为止，我已设法动态创建行jsfiddle

现在我需要做的是当用户点击生成（我正在使用PHP）时，该表必须显示在html文本区域中。

我确实尝试了下面的代码，但没有工作

<form action="1.php" method="post">
<?php
 echo $table = '<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
<tr><td colspan=3>sdsdsdsds</td></tr>
<tr><td colspan=1>fsdfsf</td><td colspan=2>sdffsdfsf</td></tr>
</table>';?>

<textarea name="thetable" style="display:none"><?php echo $table ?></textarea>

<input type="button" name="add" value="Add 1 Column" id="addrows1" style="color:#3300FF; font-size:16px; " />

<input type="submit" name="gen" value="Generate Table"  style="color:#3300FF; font-size:16px; " />
</form>

<?php

if(isset($_POST['gen']))
{
var_dump($_POST['thetable']);   
}

?>

有关我如何解决此问题的任何帮助？

Answer 1

从你的jsfiddel，我在你的代码中添加<input>。

$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>');

为什么没有尝试添加<input>？希望这能帮到你

Answer 2

您可以在生成行时启用contenteditable，以便立即对其进行编辑。您不再需要点击生成按钮，但如果您真的想先点击它，那么请随意以您想要的任何方式编辑它。这是一个例子：

HTML - 它仍然相同。我在这里什么也没做。

<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
    <tr>
        <th align="center"> Roll No </th>
        <th align="center"> First Name </th>
        <th align="center"> Last Name </th>
    </tr>
    <tbody>
        <tr><td>1</td><td>John</td><td>Sample</td></tr>
    </tbody>
</table>

<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " />
<input type="button" name="add" value="Generate table to edit" id="" style="color:#3300FF; font-size:16px; " />

SCRIPT - 将附加代码放在每个<td>中。放置id也可以获取它们的值并将它们保存到数据库中。

var counter = 1;

$("#addrows").click(function(){
    $('#maintable tr:last').after('<tr><td id="col1'+counter+'" contenteditable="true">...</td><td id="col2'+counter+'" contenteditable="true">...</td><tdid="col3'+counter+'" contenteditable="true">...</td></tr>');
});

注意 - 如果要单击生成表按钮，则需要使用jQuery ajax和数据库（如果要保存要创建的值）。我给了你一些可以帮到你的链接。希望我给你一个良好的开端，关心你的问题。

About contenteditable

About jQuery.ajax()

About serialize()

Tutorial on how to use contenteditable with PHP, MySQL, and jQuery Ajax

在提交

2 个答案: