Question

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

我无法调整由Web应用程序生成的id或类，因此我需要处理可用的内容。

我一直试图用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>

Answer 1

你的意思是这样吗？

   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.

<强> Demo

或者只是简单地克隆表并从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();

<强> Demo

所使用的每种方法都有网络上提供的文档，您可以使用它来根据您的需要自行制定一些内容。

Answer 2

您可以使用简单的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);
    }
  }
}

使用Javascript将表拆分为单行表

2 个答案: