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

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

这就是我们所需要的：

表1

城市州人口市长时区

纽约纽约8405837比尔德布拉西奥UTC-5

芝加哥伊利诺伊州2695598拉姆·伊曼纽尔UTC-6

休斯顿德克萨斯州2195914安妮·帕克UTC-6

表2：

纽约市

州纽约

人口8405837

市长比尔·德布拉西奥

时区UTC-5

芝加哥市

州伊利诺伊州

人口2695598

市长拉姆·伊曼纽尔

时区UTC-6

休斯顿市

州德克萨斯州

人口2195914

市长安妮·帕克

时区UTC-6

这就是我现在所拥有的，并将继续努力。它转换了表格：

$（“.other”）。单击（函数（）{
$（“表”）。每个（函数（）{
var$this=$（this）；
var newrows=[]；
$this.find（“tr”）.each（函数（）{
var i=0；
$（this.find（“td”）.each（function（）{
i++；
if（newrows[i]==未定义）{newrows[i]=$（“”）；}
新行[i]。追加（$（this））；
});
});
$this.find（“tr”）.remove（）；
$.each（新行，函数（）{
$this.append（this）；
});
});
返回false；
});

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

如果再次单击链接，表应切换到上一个状态。

应保留所有id、类名和属性，并遵循该值。因此，如果两次单击链接，表不会发生任何更改

表中的列数和行数可以是任意的M x N表格应在点击链接时转换为2 x（M*（N-1））表格，而2 x（M*（N-1））表格应通过再次点击链接转换回M x N

单击链接后，应为页面上的每个表执行此操作

我可以忽略问SO的问题，试着自己去做，但我相信这需要很多时间才能让它工作，一个人无法找到所有的bug

---

然而，我相信这是一项有趣的任务，这项实际任务可能对其他任何人都有用。

对此进行了尝试，并获得了一个有效的示例。在我的示例中，它将

更改为

，因为这对于新布局在语义上更为正确

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;
    }
});

flag=0；
oldState=''；
$（“.other”）。单击（函数（）{
myDls=''；
如果（标志==0）{
//克隆旧表
oldState=$（'#MyTable'）.clone（true）；
//将表格更改为dl、dt、dd
$（'#MyTable tr'）。每个（函数（索引）{
//通过
$（'td'，this）.each（函数（索引）{
//获取当前列的名称并更改为
$（this.parent（）.parent（）.find（'tr:first child th:eq（'+index+'））。each（function（）{
var replacementTagd='dt'；
var outer=this.outerHTML；
var regex=new RegExp（'Alex，感谢您的解决方案。
这是我的解决方案（仍然在中间，为价值而工作，并没有回到以前的状态）：

$（“.other”）。单击（函数（）{
$（“表”）。每个（函数（）{
var$this=$（this）；
var newrows=[]；
var firstRow=$this.first（“tr”）；
var rowsNum=第一行查找（“th”）长度；
var colNum=$this.find（“tr”）.length；
//填充第一列
var j；
对于（j=0；j<（colNum-1）*rowsNum；j++）{
新行[j]=$（“”）；
//新行[j].append（“+firstRow.find（“th”）.eq（j%rowsNum.text（）+”）；
新行[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（）{
//新行[i]。追加（“+$（this）.text（）+”）；
新行[i].append（$（this）[0].outerHTML）；
i++；
});
});
$this.find（“tr”）.remove（）；
$.each（新行，函数（）{
$this.append（this）；
});
});
返回false；

})；
Downvoter，请解释你的投票。你不喜欢我的问题吗？我没有搜索它？我这边没有努力？解释不好？没有提供代码，只有JSFIDLE？它不是在你的小提琴中做你需要的吗？@Alex Thomas不，它只是转换表格。我需要修改它，使它只有两列，如上面的城市示例所示。t他的解决方案不会保留属性。@Alex Thomas，你说得对。我在上面提到过它-对值有效。但现在，我更新了这两个字符串（旧的字符串已注释）。现在它保留了属性。但是，它仍然没有还原操作，可能会更复杂。@Alex Thomas完全没有问题。我没有发现任何问题。效果很好。我会在一个小时左右接受你的答案作为最佳答案。我给其他用户一个机会添加更多答案（如果有的话）。你让我度过了美好的一天。非常感谢。
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;
    }
});

$(".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;