0

我想使用 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>
4

2 回答 2

2

你的意思是这样的吗？

   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 中删除除此之外的所有其他 tr 并将其添加到 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();

演示

使用的每种方法都有网络上可用的文档，您可以使用它来自己解决您需要的东西。

于 2013-10-12T03:10:39.747 回答
0

您可以使用简单的 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);
    }
  }
}
于 2019-08-09T06:39:45.347 回答