如何避免 jquery table 中的重复字符串

Question

如何避免 jquery table 示例输出中的重复字符串 here I am looking to consolidate the questions in a one column. The expected table(ouput) look like this

var list=[
{q:'Question1',r:'response1',credit:4},
{q:'Question2',r:'response2',credit:9},
{q:'Question2',r:'response3',credit:3},
{q:'Question3',r:'response4',credit:8},
{q:'Question3',r:'response5',credit:9},
{q:'Question3',r:'response6',credit:3},
{q:'Question4',r:'response7',credit:7},
{q:'Question4',r:'response8',credit:9},
{q:'Question4',r:'response9',credit:3},
{q:'Question4',r:'response10',credit:1},
{q:'Question5',r:'response11',credit:5},
{q:'Question5',r:'response12',credit:3}
];
 

$.each(result, function (key,qstn) {
                        html += '<tr>';  
                        html += '<td>' + qstn.q+ '</td>'; 
                        html += '<td>' + qstn.response+ '</td>';
                        html += '</tr>';  
                        });
                });
                    $('.tbody').append(html);

Answer 1

试试这个

Jquery

$(document).ready(function(){
var list=[
{q:'Question1',r:'Response1',c:4},
{q:'Question2',r:'Response2',c:9},
{q:'Question2',r:'Response3',c:3},
{q:'Question3',r:'Response4',c:8},
{q:'Question3',r:'Response5',c:9},
{q:'Question3',r:'Response6',c:3},
{q:'Question4',r:'Response7',c:7},
{q:'Question4',r:'Response8',c:9},
{q:'Question4',r:'Response9',c:3},
{q:'Question4',r:'Response10',c:1},
{q:'Question5',r:'Response11',c:5},
{q:'Question5',r:'Response12',c:3}
];

var dupes = {};
var singles = [];
$.each(list, function(i, el) {
    if (!dupes[el.q]) {
        dupes[el.q] = true;
        singles.push(el);
    }
});

var html='';
$.each(singles,function(i,el){
var itemArr = $.grep(list, function (item, index) {
       return (item.q==el.q);
   });
   console.log(itemArr);
   
  
  $.each(itemArr,function(iitem,iindex){
  if(iitem==0){
  html += '<tr>';  
  html += '<td rowspan='+itemArr.length+'>' + iindex.q+ '</td><td>'+iindex.r+'</td><td>'+iindex.c+'</td>'; 
  
  html +='</tr>';
  }else{
  html += '<tr><td>' + iindex.r+ '</td><td>' + iindex.c+ '</td>';
  html += '</tr>';
  }
  });
   
})

 $('.tbody').append(html);  
});

HTML

<table border="1">
<thead>
<th>Question<th>Response<th>Count</th>
</thead>
<tbody class="tbody" >
</tbody>
</table>

Answer 2

我曾经是 jQuery 的坚定支持者 - 毕竟，它使我们能够为各种 JavaScript 功能有限的浏览器编写简短而有意义的代码。然而，世界在不断发展，我们的“现代”浏览器现在支持许多长期以来只能在 jQuery.

中找到的功能

所以，这是我对没有 jQuery 的答案的看法：

var list=[
{q:'Question1',r:'Response1',c:4},
{q:'Question2',r:'Response2',c:9},{q:'Question2',r:'Response3',c:3},
{q:'Question3',r:'Response4',c:8},{q:'Question3',r:'Response5',c:9},{q:'Question3',r:'Response6',c:3},
{q:'Question4',r:'Response7',c:7},{q:'Question4',r:'Response8',c:9},{q:'Question4',r:'Response9',c:3},{q:'Question4',r:'Response10',c:1},
{q:'Question5',r:'Response11',c:5},{q:'Question5',r:'Response12',c:3}
];
list.cnts=list.reduce((a,c)=>(a[c.q]=(a[c.q]||0)+1,a),{}) // calculate rowcounts first

document.querySelector(".tbody").innerHTML=list.map(e=>
  ( e.q!==list.prev && (list.prev=e.q) // not the same question as before?
           ?'<td'+(list.cnts[e.q]>1?' rowspan="'+list.cnts[e.q]+'"':'')+'>'+e.q+'</td>'
           :'' 
  ) + '<td>'+e.r+'</td><td>'+e.c+'</td>'
 ).join('</tr>\n<tr>');

<table border="1">
<thead>
<th>Question<th>Response<th>Count</th>
</thead>
<tbody class="tbody" >
</tbody>
</table>

感觉行

 e.q!==list.prev && (list.prev=e.q)

值得进一步解释。请记住，JavaScript 以“惰性”方式从左到右评估布尔表达式。这意味着如果第一项被评估为 false，它将停止评估 &&-表达式。所以在测试是否 e.q!==list.prev i 之后。 e.如果当前问题与可能存储的“上一个”问题不同，则取决于实际结果，是否执行第二部分(list.prev=e.q)。有两种可能的情况：

e.q!==list.prev is true：这意味着当前问题是一个“新”问题。现在将执行第二个表达式，i。 e. 属性 list.prev 将接收当前问题的值 e.q 并且组合表达式的总体结果为 true （作为问题值 e.q，作为只要它不是一个空字符串，就被评估为“真实的”）。
e.q!==list.prev是false：当前题与（存储的）上一题完全相同。第二个表达式将不再执行，组合表达式将 return 值 false

这个组合表达式值现在决定是否为第一列插入一个 <td> 元素。如果它有多个答案，它还将包含一个 'rowspan="'+list.cnts[e.q]+'"' 属性，使其跨越多行。

如何避免 jquery table 中的重复字符串

How to avoid duplicate string in a jquery table

html

jquery

html-table