如何通过填充从数据库中获取的数据在 HTML 表中自动创建行答案

【问题标题】：How to automatically create rows in an HTML table by populating data taken from a DB如何通过填充从数据库中获取的数据在 HTML 表中自动创建行
【发布时间】：2018-11-02 17:05:49
【问题描述】：

大家好，我在 MYSQL 中有一个数据库表，其中包含许多名为“mezziDiTrasporto”的行。我的目标是创建一个表，一旦对表执行 SELECT，就会自动生成由从我的数据库表中提取的数据填充的行有可能做到这一切吗？

<html>
<body>
<table>
<tr>
	   <td  style="vertical-align: middle;" align="center">SI/NO</br><input  type="checkbox" class="chkView"/></td>
	    <td bgcolor="#DCDCDC"><input type="text" name="idMezzo" id="idMezzo" width="75px" class="chkEdit" enable></td>
	   
	    <td><form action="">
 		<select name="mezziDiTrasporto" class="chkEdit" enable>
  			<optgroup label="1 - Mezzi d'opera">
			   <option value="http://www.html.it">Escavatore</option>
			   <option value="http://www.html.it/javascript">Terna</option>
			   <option value="http://www.html.it/css">Pala</option>
			   <option value="http://www.html.it/css">Autobenpompa</option>
				
	      </optgroup>
 
  			<optgroup label="2 - Automezzi">
			   <option value="http://font.html.it">Camion</option>
			   <option value="http://cgipoint.html.it">Autovetture </option>
			   <option value="http://www.html.it/css">Autocarro</option>
			   <option value="http://www.html.it/css">Furgoni</option>
  			</optgroup>
			<optgroup label="3 - Mezzi di sollevamento (All. VII del D-Lgs. 81/08)">
			   <option value="http://font.html.it">Gru</option>
			   <option value="http://cgipoint.html.it">CamionGru </option>
			   <option value="http://www.html.it/css">AutoGru</option>
			   <option value="http://www.html.it/css">PLE</option>
  			</optgroup>
			<optgroup label="4 - Attrezzature">
			   <option value="http://font.html.it">Trapani</option>
			   <option value="http://cgipoint.html.it">Sega Circolare</option>
			   <option value="http://www.html.it/css">Martelli demolitori</option>
			   <option value="http://www.html.it/css">Trabatelli</option>
  			</optgroup>
			
 </select>
</form> </td>
	    <td><input type="text" name="id7" id="id8" width="75px" class="chkEdit" enable></td>
	    <td><input type="text" name="id8" id="id9" width="75px" class="chkEdit" enable></td>
	    <td><input type="text" name="id9" id="id10" width="75px" class="chkEdit" enable></td>
	    <td><input type="text" name="id10" id="id11" width="75px" class="chkEdit" enable></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">
			<p>Carica file </p>
			<p></p>

			<p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div>
</td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Upload file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file" >

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable >

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable> 

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td><div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">

    <div id="drag_upload_file">

        <p>Carica file </p>

        <p></p>

        <p><input type="button" value="Select File" onclick="file_explorer();" class="chkEdit" enable></p>

        <input type="file" id="selectfile" class="chkEdit" enable>

    </div>

</div></td>
	    <td></td>
	    <td width="144" bgcolor="#6DFD1E">AUTORIZZATO    /<br>
	      NON AUTORIZZATO</td>
	    <td width="138">SI se Y e AB    sono OK e AA Foglio Aut. Sub.</td>
	    <td>Scarica Badge mezzo</td>
	    <td width="165">Se SI, stampa    badge con data autorizzazione dalla Casella AC58 foglio Aut. Singolo Sub</td>
      </tr>
</table>
</body>
</html>

下面我发布了我必须变为动态的 HTML 表格的屏幕截图

enter image description here

我的问题是：我可以创建一个函数来添加这么多行 (<tr>) 的表，数据库中有多少行？是否已经有执行此任务的预制功能？问这个问题是因为我不知道如何开发这个函数的代码。

【问题讨论】：

请贴一些代码，你已经尝试了什么
我问这个问题是因为我不知道如何开发这个函数的代码。 @迈克
至少你可以向我们展示你的表格结构，html代码。
好的，我会添加它们，但请记住，@Mike 有数千行代码
其实没必要贴双码。

标签： javascript php html mysql html-table

【解决方案1】：

@Andrea Pilenga。如果您希望我详细说明以下任何步骤，请告诉我。

使用从数据库中选择的数据动态填充表的步骤：

1) 从 php 数组变量 $records 中的数据库中获取记录。 2) 在 PHP 文件中，还创建一个函数 generateRows() 并将 $records 作为参数传递给它。 generateRows() 函数如下所示：

function generateRows($records)
{
   $html = "";

   foreach($records as $row)
   {
      $html .= "<tr><td>$row['".column1."']</td><td>$row['".column2."']</td><td>$row['".columnn."']</td></tr>"; 
   }
   return $html;
}

调用上面的函数，你已经在 php tag() 中定义了 html 表的标题行。

如果有什么不明白或需要详细说明，请告诉我。

【讨论】：

为什么要为它制作一个单独的函数？为什么不只是 foreach？
@Mike。这样它就可以用作可重用组件，并有助于保持代码松散耦合。这不是强迫，而是一种好的做法。
@VrajeshDoshi 我真的很感谢你的友好回应。但是你是说$html .= "<tr><td>$row['".column1."']</td><td>$row['".column2."']</td><td>$row['".columnn."']</td></tr>"; 这条线仍然有效，尽管我的桌子很有吸引力？
@AndreaPilenga 尽管你的桌子很有吸引力，但它不会起作用，但它会回答你的问题。我们无法为您提供 who;e 代码。我们只能在您遇到困难的地方为您提供帮助。
不，伙计，我不是在问你解决问题的方法。这只是一个问题，但现在我正在努力。谢谢你们的帮助

【解决方案2】：

首先，没有预定义的方法可以用纯 JavaScript 从数据集创建表，所以我们必须编写自己的逻辑来做同样的事情。

您提供的信息不足以创建完美的工作样本

一般情况下，您可以按照以下步骤根据数据库结果创建表

第 1 步：为您的服务器端方法创建一个 ajax 请求以获取数据库数据。

第二步：Ajax成功获取数据

第 3 步：遍历数据并使用数据集中的 td 值创建一个动态 tr

第 4 步：使用表 ID 将 tr 附加到您的表中。

示例： html

<span>JSON:</span>
<pre id="json"></pre>
<input type="button" id="btnConvert" value="Convert To Table" />

Javascript

var jData = '[{"fname":"Mark", "lname":"Wood", "company":"Apple"},' +
  '{"fname":"Steve", "lname":"Jones", "company":"Amazon"},' +
  '{"fname":"Bill", "lname":"Peterson", "company":"HP"},' +
  '{"fname":"Peter", "lname":"Jacobs", "company":"Dell"}]';

var seperator = ',';
$('#json').html(jData);
$('#btnConvert').click(function() {
  ConvertToTable(jData);
});

function ConvertToTable(jData) {
  var arrJSON = typeof jData != 'object' ? JSON.parse(jData) : jData;
  var $table = $('<table/>');
  var $headerTr = $('<tr/>');

  for (var index in arrJSON[0]) {
    $headerTr.append($('<th/>').html(index));
  }
  $table.append($headerTr);
  for (var i = 0; i < arrJSON.length; i++) {
   var $tableTr = $('<tr/>');
    for (var index in arrJSON[i]) {
      $tableTr.append($('<td/>').html(arrJSON[i][index]));
    }
    $table.append($tableTr);
  }
  $('body').append($table);
}

如果没有实际数据、html 和您的实现，我无法提供实际的工作示例，但here 您可以找到通用版本

另一种工作方法Here

【讨论】：