javascript - 从表格中删除内容并重新格式化表格

标签 javascript jquery html

我想做

我的页面以以下格式显示表格的数据。

enter image description here

有什么方法可以删除具有空白值的内容并重新格式化表格,如下所示。

enter image description here

其他详细信息

实际表格中的任何值都可能为空(请参阅第一张图片)。我想删除特定的 Test 行(具有空白值),并通过使用值均匀分布剩余的 Test 行来重新格式化表格。

最佳答案

这是一个工作版本:

function editTable() {
    var idx = 0;
    var $td = $('#prodHold td:nth-child(2), #prodHold td:nth-child(4)');
    $td.each(function () {
        if ($(this).text() !== "") {
            $td.eq(idx++).text($(this).text()).prev().text($(this).prev().text());
        }
    });
    $('#prodHold tr').slice((idx+1)>>1).remove();
    if (idx % 2) $('#prodHold tr:last td').slice(-2).text(""); 
}

$(editTable);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="prodHold" border=1>
<tr><td>Test1</td><td>1</td><td>Test2</td><td>2</td></tr>
<tr><td>Test3</td><td>1</td><td>Test4</td><td>2</td></tr>
<tr><td>Test5</td><td></td><td>Test6</td><td>2</td></tr>
<tr><td>Test7</td><td>1</td><td>Test8</td><td></td></tr>
<tr><td>Test9</td><td>1</td><td>Test10</td><td>2</td></tr>
<tr><td>Test11</td><td></td><td>Test12</td><td>2</td></tr>
<tr><td>Test13</td><td>1</td><td>Test14</td><td>5</td></tr>
<tr><td>Test15</td><td>1</td><td>Test16</td><td></td></tr>
<tr><td>Test17</td><td>1</td><td>Test18</td><td></td></tr>
<tr><td>Test19</td><td>1</td><td>Test20</td><td>2</td></tr>
</table>

关于javascript - 从表格中删除内容并重新格式化表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46233683/

相关文章:

javascript - 如何从 Alfresco Javascript 中访问本地 CSS 文件?

javascript - 如何解读JQuery UI的API文档?

c# - 如何在将 HTML 从 abcpdf 转换为 PDF 时加载外部图像

jquery 数组 .val()

javascript - 如何使用 JavaScript(不是 jQuery)隐藏工具提示

css - Facebook Javascript SDK 在 Firefox 的响应式 Twitter Bootstrap 页面中导致额外的边距/填充

javascript - 为什么我的数据类成员不能直接使用?

javascript - knockout JS 嵌套数组。将项目添加到子数组

php - 使用 AJAX 和 JQuery 通过 PHP 进行简单验证

javascript - 向左溢出 :hidden doesn't work on . animate(),但向右有效?