使用 Jquery 从 HTML 表中创建一个自定义数组答案

【问题标题】：Make a custom array from HTML Table using Jquery使用 Jquery 从 HTML 表中创建一个自定义数组
【发布时间】：2017-03-08 05:01:32
【问题描述】：

我想从 html 表中创建一个自定义数组... 在 Html 表中，我有 6 列。我想制作前 5 列的数组我只想获取文本数组，我不想在该数组中包含 Button，表格为 6*6

var array = [];
var headers = [];

$('#tbl1 th').each(function(index, item) {

  headers[index] = $(item).html();
});
$('#tbl1 tr').has('td').each(function() {

  var arrayItem = {};
  $('td', $(this)).each(function(index, item) {


    arrayItem[headers[index]] = $(item).text();
  });
  debugger;
  array.push(arrayItem);
});

alert(array);
$("#gridContainer").dxDataGrid({
  dataSource: array
});

【问题讨论】：

您好，请添加html表结构
为什么需要第二个内联循环？
基本上我想从这个表中创建数组，然后想将该数组作为数据源发布到 DevExtreme GridView

标签： jquery html arrays

【解决方案1】：

var array = [];
var headers = [];
$('table thead tr th:not(:last-child)').each(function() {
  headers.push($(this).html());
});
console.log(headers);

$('table tbody tr').each(function(index, item) {
  $('td:not(:last-child)', $(this)).each(function() {
     var arrayItem = {};
     arrayItem[headers[index]] = $(this).text();
      //array.push({headers[index]: $(item).text()});
      array.push(arrayItem);
  });
});
console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="5" border="1">
  <thead>
    <tr>
      <th>HTML <span>HEADER TEXT 1</span></th>
      <th>HTML <span>HEADER TEXT 2</span></th>
      <th>HTML <span>HEADER TEXT 3</span></th>
      <th>HTML <span>HEADER TEXT 4</span></th>
      <th>HTML <span>HEADER TEXT 5</span></th>
      <th>HTML <span>HEADER TEXT 6</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML <span>TEXT 1</span></td>
      <td>HTML <span>TEXT 2</span></td>
      <td>HTML <span>TEXT 3</span></td>
      <td>HTML <span>TEXT 4</span></td>
      <td>HTML <span>TEXT 5</span></td>
      <td>HTML <span>TEXT 6</span></td>
    </tr>
    <tr>
      <td>HTML <span>TEXT 1</span></td>
      <td>HTML <span>TEXT 2</span></td>
      <td>HTML <span>TEXT 3</span></td>
      <td>HTML <span>TEXT 4</span></td>
      <td>HTML <span>TEXT 5</span></td>
      <td>HTML <span>TEXT 6</span></td>
    </tr>
    <tr>
      <td>HTML <span>TEXT 1</span></td>
      <td>HTML <span>TEXT 2</span></td>
      <td>HTML <span>TEXT 3</span></td>
      <td>HTML <span>TEXT 4</span></td>
      <td>HTML <span>TEXT 5</span></td>
      <td>HTML <span>TEXT 6</span></td>
    </tr>
    <tr>
      <td>HTML <span>TEXT 1</span></td>
      <td>HTML <span>TEXT 2</span></td>
      <td>HTML <span>TEXT 3</span></td>
      <td>HTML <span>TEXT 4</span></td>
      <td>HTML <span>TEXT 5</span></td>
      <td>HTML <span>TEXT 6</span></td>
    </tr>
    <tr>
      <td>HTML <span>TEXT 1</span></td>
      <td>HTML <span>TEXT 2</span></td>
      <td>HTML <span>TEXT 3</span></td>
      <td>HTML <span>TEXT 4</span></td>
      <td>HTML <span>TEXT 5</span></td>
      <td>HTML <span>TEXT 6</span></td>
    </tr>
  </tbody>
</table>

【讨论】：

如果超过 6 行/列会发生什么？
您可以拥有任意多的行，脚本可以正常工作。你可以试试看。
列也是如此
所以你是在告诉我，如果我有 20 行/列并且我想要前 5 行，那么这会起作用吗？
不，它只跳过最后一列。所以如果你有 20 列，你会得到 19。如果你想有特定的 5 列，我可以编辑答案然后

【解决方案2】：

使用:lt 选择器

var headers ={};

$('table th').each(function(index, item) {

  headers[index] = $(item).html();
});
var array = [];

$('table tbody tr:lt(5)').each(function(index, item) {
var temp = {};
  $(this).find('td:lt(5)').each(function(i, x) {
        var head = headers[i];
        temp[head] = $(x).text();           
  });
   array.push(temp);
});
console.log(array);

演示：https://jsfiddle.net/s6L0pok2/3/

【讨论】：

td:lt(5) 只会给出第 5 列数组？不是吗？OP 说I want to make array of first 5 columns
它不工作，...没有什么可以显示使用您的建议... madalin ivascu
@madalinivascu 您更新的答案仍然无效

【解决方案3】：

var array = [];
var headers = [];

$('#tbl1 th').each(function(index) {

if(index<=4)

  headers[index] = $(this).html();
});

$('#tbl1 tr').each(function(index) {
 var arrayItem = {};
	$(this).find('td').each(function(index2){
		if(index<=4)
		{
		arrayItem[headers[index]] = $(item).text();
		}

	})
	
  array.push(arrayItem);
  
});

alert(array);

$("#gridContainer").dxDataGrid({
  dataSource: array
});

【讨论】：

这是做什么的？