使用 Javascript 将表拆分为具有一行的单个表

Split Table into Individual Tables with One Row with Javascript

本文关键字：具有一 单个表 拆分 Javascript 使用      更新时间：2023-09-26

我想使用 Javascript 将整个表拆分为三个子表。每个表都应保留其标头信息。

我无法调整 id 或类，因为它们是由 Web 应用程序生成的，所以我需要使用可用的内容。

我一直试图用 Jfiddle 解决这个问题很长一段时间，并且感到沮丧。我对Javascript很陌生，但无法想象这需要大量代码。如果有人知道如何按行大小将其拆分（即拆分表，但有选择地），那也将不胜感激。

我仅限于Javascript和Jquery 1.7。

<div id="serviceArray">
    <table border="1" class="array vertical-array">
        <thead>
            <tr>
                <th>#</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Sum</td>
                <td>$180</td>
                <td>$500</td>
                <td>$300</td>
                <td>$700</td>
                <td>$600</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>Home</td>
                <td>$100</td>
                <td>$200</td>
                <td>$200</td>
                <td>$300</td>
                <td>$400</td>
                <td>$500</td>
            </tr>
            <tr>
                <td>Work</td>
                <td>$80</td>
                <td>$300</td>
                <td>$100</td>
                <td>$400</td>
                <td>$200</td>
                <td>$500</td>
            </tr>
        </tbody>
    </table>
</div>

你的意思是这样的吗？

   var tables = $('#serviceArray table tbody tr').map(function () { //For each row
   var $els = $(this).closest('tbody') //go to its parent tbody
              .siblings('thead').add(   //fetch thead 
                         $(this)  //and add itself (tr) 
                           .wrap($('<tbody/>')) //wrapping itself in tbody
                           .closest('tbody')); //get itself with its tbody wrapper
        return $els.clone()        //clone the above created steps , i.e thead and tbody with one tr
                    .wrapAll($('<table/>', {     //wrap them all to a new table with 
                          'border': '1',         //attributes.
                          'class': 'array vertical-array'
                    })
                ).closest('table');   //get the new table
   }).get();
$('#serviceArray table').remove();
$('body').append(tables);  //append all to the table.

演示

或者只是简单地克隆表并从 tbody 中删除除此表之外的所有其他 trs 并将其添加到 DOM（更短的解决方案）。

var tables = $('#serviceArray table tbody tr').map(function (idx) {
    var $table = $(this).closest('table').clone().find('tbody tr:not(:eq(' + idx + '))').remove().end();
    return $table;
}).get();

演示

使用的每种方法都有 web 中提供的文档，您可以使用它自己根据自己的需要制定一些内容。

您可以使用简单的 Javascript 来创建表，它将根据您从 API 返回的响应生成行。

var tableHeader = this.responseJsonData.Table_Headers;
var tableData = this.responseJsonData.Table_Data;
let table = document.querySelector("table");
function generateTableHead(table, data) {
//alert("In Table Head");
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}
function generateTable(table, data) {
//  alert("In Generate Head");
    for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}
相关文章：