Question

使用jQuery / javascript修改页面上的html表的最简单方法是什么，这样：它包含相同的数据，但只有两行。

这就是所需要的：

表1

城市州人口市长时区

纽约纽约 8,405,837 Bill de Blasio UTC-5

芝加哥伊利诺伊州 2,695,598 Rahm Emanuel UTC-6

休斯顿德克萨斯 2,195,914 Annise Parker UTC-6

表2 ：

纽约市

州纽约

人口8,405,837

市长 Bill de Blasio

时区UTC-5

芝加哥城

州 伊利诺伊州

人口2,695,598

市长 Rahm Emanuel

时区UTC-6

休斯顿市

州德州

人口2,195,914

市长 Annise Parker

时区UTC-6

这就是我现在所拥有的，并将继续努力。它转换表：http://jsfiddle.net/0cm611xv/

$(".other").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    return false;
});

但是，我需要以另一种方式修改表格 - 如上所述：

如果再次点击链接，表格应切换到之前的状态。
应保留所有ID，类名和属性并遵循该值。因此，如果在链接上单击两次，表格没有任何变化。
表中的列数和行数可以是任意数。单击链接后， M x N 表应转换为 2 x（M *（N-1））表， 2 x（M *（N-） 1））应该再次点击链接转换回 M x N 。
单击链接后，应对页面上的每个表格执行此操作。

我可以忽略问SO并尝试自己做，但我相信它需要花费很多时间才能让它发挥作用而且一个人无法找到所有错误。

但是，我相信这是一项有趣的任务，这项实际工作对任何人都有用。

Answer 1

去过这里，得到了一个有效的例子。在我的示例中，它将<table>更改为<dl>，因为这对于新布局在语义上更正确。

<强>的jQuery

flag=0;
oldState = '';
$(".other").click(function(){
    myDls = '';
    if (flag == 0) {

        // Clone the old table
        oldState = $('#MyTable').clone(true);

        // Change Table to dl,dt,dd
        $('#MyTable tr').each(function(index){
            // Itterate through the <td>s
            $('td',this).each(function(index){
                // Get the <th> for the current <td> column and change to <dt>
                $(this).parent().parent().find('tr:first-child th:eq('+index+')').each(function(){
                    var replacementTagd = 'dt';
                    var outer = this.outerHTML;
                    var regex = new RegExp('<' + this.tagName, 'i');
                    newTagd = outer.replace(regex, '<' + replacementTagd);
                    regex = new RegExp('</' + this.tagName, 'i');
                    newTagd = newTagd.replace(regex, '</' + replacementTagd);
                });

                // Change <td> to <dd>
                var replacementTag = 'dd';
                var outer = this.outerHTML;
                var regex = new RegExp('<' + this.tagName, 'i');
                var newTag = outer.replace(regex, '<' + replacementTag);
                regex = new RegExp('</' + this.tagName, 'i');
                newTag = newTag.replace(regex, '</' + replacementTag);

                // Append to variable
                myDls += newTagd+newTag;
            });
        })

        $('#MyTable').replaceWith('<dl id="MyDl">'+myDls+'</dl>');
        flag=1;       
    }
    else {
        $('#MyDl').replaceWith(oldState);
        flag=0;
    }
});

查看jsfiddle - http://jsfiddle.net/L8z9bsv0/

Answer 2

亚历克斯，谢谢你的解决方案。这是我的解决方案（仍在中间，适用于价值观，并且还没有回到以前的状态）：

$(".other").click(function(){

       $("table").each(function() {
            var $this = $(this);
            var newrows = [];
            var firstRow = $this.first("tr");
            var rowsNum = firstRow.find("th").length;
            var colNum = $this.find("tr").length;

            //populate the first column
            var j;
            for (j=0; j< (colNum-1)*rowsNum; j++){
                newrows[j] = $("<tr></tr>");
                //newrows[j].append("<td>"+firstRow.find("th").eq(j%rowsNum).text()+"</td>");
                newrows[j].append(firstRow.find("th").eq(j%rowsNum)[0].outerHTML);
            }

            var i = 0;
            $this.find("tr:not(:first)").each(function(){
                $(this).find("td").each(function(){
                    //newrows[i].append("<td>"+$(this).text()+"</td>");
                    newrows[i].append($(this)[0].outerHTML);
                    i++;
                });
            });

            $this.find("tr").remove();
            $.each(newrows, function(){
                $this.append(this);
            });
        });
        return false;

}）;

jQuery：通过更改列数来修改html表

2 个答案: