Получить значения таблицы из таблицы неизвестного размера - PullRequest
Новая
       0

Получить значения таблицы из таблицы неизвестного размера

0 голосов
/ 04 января 2019

Я нахожусь в процессе создания веб-сайта, и у меня есть таблица HTML, в которую можно добавить строку, нажав кнопку.Существует поле ввода для каждого столбца в каждой строке.Когда таблица отправлена, она должна извлечь всю информацию из всех полей ввода и поместить ее в массив, разделяющий строки.

Я уверен, что для этого требуется цикл, и я попытался получить дочерние элементы изtbody элемент, но это не вернуло правильные значения. 

function submitForm() {
    var c = $("#tbl").children;
    console.log(c);
}

Ответы [ 3 ]

0 голосов
/ 04 января 2019

это очень просто, просто просмотрите строки массива и ячейки каждой строки.Очевидно, я не знаю, какой тип массива вы хотите, но я привел вам пример массива с Jquery.

Надеюсь, он вам поможет. 

	$(function(){
		var datas = [];
		$.each($('#table tr'), function(index, val) {
			 var childs = $(this).children('td');
			 var array = {childs: []};
			 $.each(childs, function(i, v) {
			 	//get your value 
			 	var value = $(this).text();
			 	 array.childs.push(value);
			 });
			 datas.push(array);
		});

		//final result 
		console.log(datas);
	});
<!DOCTYPE html>
<html>
<head>
	<title>Resultat</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div>
		<table id="table" border="1">
			<tr>
				<td>Value1 line1</td>
				<td>Value2 line1</td>
				<td>Value3 line1</td>
			</tr>			
			<tr>
				<td>Value1 line2</td>
				<td>Value2 line2</td>
				<td>Value3 line2</td>
			</tr>
			<tr>
				<td>Value1 line3</td>
				<td>Value2 line3</td>
				<td>Value3 line3</td>
			</tr>
		</table>
	</div>
</body>
</html>
0 голосов
/ 04 января 2019

Предполагая ...

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

Настройка

Демонстрация полностью функциональна:

  • Добавляет и удаляет строки

  • A <form> обернуто вокруг <table>, поскольку в каждом <td>

    * 1020 есть <input>*
  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *,,,,,,,,,,,,)), *
  • * Не "живущий" сервер не отправит ответ в виде JSON, который будет отображаться в * 1026.* расположен ниже <table>.
  • Это поведение по умолчанию, вызванное событием submit, будет временно отложено этой функцией: 
   // Earlier in the code, this was called to interrupt the default behavior
    event.preventDefault();
    ...
    /* .map() all inputs in the table...
    | store all the strings that contain an input's name and value into a jQuery Object
    | .get() the data from the jQuery Object as an array
    | although optional, you can present it as a string by using `.join()`
    */// Finally, submit the form data to the test server
    var dataArray = $('.data input').map(function(idx, txt) {
      return `${$(this).attr('name')}: ${$(this).val()}`;
    }).get().join(', ');
    console.log(JSON.stringify(dataArray));
   $('.ui').submit();
     /**/

Демо 

var count = 0;
var row = `<tr><td><input name='a'></td><td><input name='b'></td><td><input name='c'></td><td><button class='del' type='button'>&#10134;</button></td></tr>`;

$('.ui').on('click', 'button', function(e) {
   e.preventDefault();
  if ($(this).hasClass('add')) {
    count++;
    $('.data').append(row);
    $('tr:last input').each(function() {
      var name = $(this).attr('name');
      $(this).attr('name', name+count);
    });
  } else if ($(this).hasClass('del')) {
    $(this).closest('tr').remove();
  } else {
    var dataArray = $('.data input').map(function(idx, txt) {
      return `${$(this).attr('name')}: ${$(this).val()}`;
    }).get().join(', ');
    console.log(JSON.stringify(dataArray));
    $('.ui').submit();
  }
});
.ui {width: 100%}
.set {padding: 0;}
.data {width: 100%; table-layout: fixed; border: 1px ridge #777; border-spacing: 1px}
td {width: 30%; padding: 0 1px}
tr td:last-of-type {width: 10%}
.add {margin: 0 0 0 85%;}
iframe {width: 100%}
.as-console-wrapper.as-console-wrapper {
  max-height: 20%;
}

.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}
<form class='ui' action='https://httpbin.org/post' method='post' target='response'>
  <fieldset class='set'>
    <button class='add' type='button'>&#10133;</button>
    <button>&#129146;</button>
  </fieldset>
<table class='data'>
  <tr><td><input name='a0'></td><td><input name='b0'></td><td><input name='c0'></td><td><button class='del' type='button'>&#10134;</button></td></tr>
</table>
</form>
<iframe src='about:blank' name='response'></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0 голосов
/ 04 января 2019

Вот упрощенное решение, которое вы можете легко использовать в своем коде отправки формы. 

const tdInputs = document.querySelectorAll('td > input');
let inputValues = [];
tdInputs.forEach(input => inputValues.push(input.value));

console.log(inputValues);
<table>
  <tr>
    <td><input type="text" value="value1"></td>
  </tr>
  <tr>
    <td><input type="text" value="value2"></td>
  </tr>  
</table>

http://jsfiddle.net/xpvt214o/1022151/

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

Нет похожих вопросов

...