Question

大家好，我在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>）数据库中有多少行吗？是否已经有执行此任务的预制函数？问这个问题是因为我不知道如何为该功能开发代码。

Answer 1

@Andrea PILENGA。请让我知道您是否要我进行以下任何步骤。

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

1）从数据库中的php数组变量$ records中获取记录。 2）在PHP File中，还创建一个函数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标签（）中定义了html表的标题行的下面调用上述函数。

让我知道是否不了解或需要一些技巧。

Answer 2

首先，没有使用纯JavaScript从数据集中创建表的预定义方法，因此我们必须编写自己的逻辑来执行此操作。

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

通常，您可以按照以下步骤根据数据库结果创建表

步骤1：向您的服务器端方法创建ajax请求，以获取数据库数据。

步骤2：成功获取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

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

2 个答案: