Как автоматически создавать строки в таблице HTML, заполняя данные, взятые из БД - PullRequest
0 голосов
/ 02 ноября 2018

Привет всем, у меня есть таблица базы данных в 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-таблицы, которая должна стать динамической

введите описание изображения здесь

У меня вопрос: могу ли я создать функцию, которая будет добавлять столько строк (<tr>) таблицы, сколько строк в базе данных? Уже есть готовая функция, которая выполняет эту задачу? Задал этот вопрос, потому что я понятия не имею, как разработать код для этой функции.

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Прежде всего, нет предопределенного метода для создания таблиц из набора данных в чистом JavaScript, поэтому мы должны написать собственную логику для того же.

Предоставленной вами информации недостаточно для создания идеального рабочего образца

Как и в целом Вы можете выполнить следующие шаги для создания таблицы на основе результатов базы данных

Шаг 1: Создайте ajax-запрос к вашему серверному методу для получения данных базы данных.

Шаг 2. Получите данные в Ajax success

Шаг 3: цикл по данным и создание динамического tr со значениями td из набора данных

Шаг 4: Добавьте tr в таблицу, используя идентификатор таблицы.

Пример: HTML

<code><span>JSON:</span>
<pre id="json">

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 и вашей реализации я не могу предоставить действительный рабочий пример, но здесь вы можете найти общую версию

Другой рабочий метод Здесь

0 голосов
/ 02 ноября 2018

@ Андреа Пиленга. Дайте мне знать, если какой-либо из следующих шагов вы хотите, чтобы я высказался.

Шаги для динамического заполнения таблицы данными, выбранными из базы данных:

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;
}

Вызовите вышеуказанную функцию чуть ниже, вы определили строку заголовка HTML-таблицы внутри тега php ().

Дайте мне знать, если ничего не поняли или нуждаетесь в каком-либо словесном выражении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...