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

Javascript 从表中删除内容并重新格式化表,javascript,jquery,html,Javascript,Jquery,Html,我想做什么 我的页面正在以下面的格式显示表格的数据 是否有任何方法可以删除具有空白值的内容并按如下所示重新格式化表格 其他详细信息 实际表格中的任何值都可能为空(请参阅第一幅图)。我想删除特定的Test行(具有空值),并通过将剩余的Test行均匀地分布值来重新格式化表 所以根据你的样本图像,我想你需要这样 以下是演示: jQuery //删除空td对 $('#tableID tr td')。每个(函数(){ 如果($(this).text()=''){ $(this.prev('td').r

我想做什么

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

是否有任何方法可以删除具有空白值的内容并按如下所示重新格式化表格

其他详细信息


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

所以根据你的样本图像,我想你需要这样

以下是演示: jQuery
//删除空td对
$('#tableID tr td')。每个(函数(){
如果($(this).text()=''){
$(this.prev('td').remove();
$(this.remove();
}
});
//获取所有tds的数组
var tds=$('#tableID tr td')。长度;
var td_arr=[];
对于(var i=0;i这非常简单:
使用每个to循环tr,如果tr上的td为空,则隐藏tr(行)


以下是一个工作版本:

函数编辑表(){
var-idx=0;
var$td=$(“#prodHold td:n个孩子(2),#prodHold td:n个孩子(4)”;
$td.每个(功能(){
如果($(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(“”);
}
$(编辑表);

测试11测试22
Test31Test42
Test5Test62
Test71Test8
Test91Test102
测试11测试122
Test131Test145
测试151Test16
测试171Test18
测试191测试202

所以我猜你想删除任何丢失数据的行?如果只是这样,你从哪里获得数据源?在表中显示之前,你不能从源中删除值吗?假设有源。@mahlatse是的,你的理解是正确的。我不能在源中处理相同的数据。我必须处理使用脚本也一样。你能发布你拥有的示例HTML并用它更新你的问题吗?还有,你想在每列中显示多少行,下一列应该显示多少行?为什么是“Text8”删除?@trincot为我的错误感到抱歉。它应该是空白的。我已经更新了我的问题。输出不是我期望的。它正在删除整行,所以,你想删除哪部分?你的第一列和第二列是一对?第三列和第四列也是一对?我在我的问题中发布了示例图像。请参考第一个图像,其中一些值是空白的。我ant删除值为空的内容并将表重新格式化为第二个图像。它在本地计算机上不工作。返回为空。我已通过调试器检查并发现
$(this).text()
的值在所有tds的//get数组中始终为空。它在替换
$(this).text()
$(this)后立即工作.html()
如果我将
Test14
的值设置为
blank
,则无法正确地重新格式化。它有什么问题?您会想到什么?如果您指的是我在上述注释中提到的JSFIDLE,那么输出中的
Test19
应该位于
Test17
的右侧。基本上在我的ac中事实上,任何值都可能是空白的。我想删除空白值的特定测试行,并在不保留任何不需要的空间的情况下重新格式化表。因此,您想要均匀地扩展。但是,如果Test6在Test7之前向左流动,它将向右移动,那么它不会变得更有意义吗?与Test13、……相同吗?WOU。你觉得合适吗?我可以这样做。是的,很好。目的不是隐藏整行。只有两个单元格应该被“删除”。
// remove blank td pair
$('#tableID tr td').each(function() {
    if ($(this).text() == ''){
       $(this).prev('td').remove();
       $(this).remove();
    }
});

// get array of all tds
var tds = $('#tableID tr td').length;
var td_arr = [];
for(var i=0; i<tds; i++){
    if($('#tableID tr td').eq(i).text()!== ''){
        td_arr.push($('#tableID tr td').eq(i).html());
    }
}

// prepare table, wrap tr for every 4 tds, *according to your table sample
var e = '<tr>';
for(var i=1; i<=td_arr.length; i++){
    if(i%4 == 0){
        e = e + '<td>' + td_arr[i-1] + '</td></tr><tr>';
    }
    else{
        e = e + '<td>' + td_arr[i-1] + '</td>';
    } 
}
// append
$('#tableID').html(e);
$('table tr').each(function(){

    if($('td:empty',this).length)
        $(this).hide(); //or $(this).remove()

});