Javascript 添加一行以更改表列的标题，并使用jQuery在标题顶部添加行

我有下表。

我想从列标题中删除城市名称并将其放在顶部。例如：

带有城市名称的列在代码中动态添加，可以是任意数字，即0、1到任意数字。

表结构为：

<table class="gvv1" cellspacing="0" rules="all" border="1" id="MainContent_gvActivities"
style="border-collapse: collapse;">
<tr style="background-color: buttonface;">
    <th scope="col">
        &nbsp;
    </th>
    <th scope="col">
        Cluster
    </th>
    <th scope="col">
        Activity
    </th>
    <th scope="col">
        Data
    </th>
    <th scope="col">
        <b>London_Tasks</b>
    </th>
    <th scope="col">
        <b>London_Achieved</b>
    </th>
    <th scope="col">
        <b>Geneva_Tasks</b>
    </th>
    <th scope="col">
        <b>Geneva_Achieved</b>
    </th>
</tr>
<tr>
    <td>
        <input id="chkSelected_0" type="checkbox" />
    </td>
    <td style="width: 50px; white-space: nowrap;">
        ER.
    </td>
    <td style="width: 50px; white-space: nowrap;">
        Provision
    </td>
    <td style="width: 60px; white-space: nowrap;">
        number
    </td>
    <td>
        <input name="ctl00Activitiesl00" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl01" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl02" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl00Activitiesl03" type="text" value="-1.00" />
    </td>
</tr>
<tr>
    <td>
        <input id="chkSelected_1" type="checkbox" />
    </td>
    <td style="width: 50px; white-space: nowrap;">
        ER.
    </td>
    <td style="width: 50px; white-space: nowrap;">
        support
    </td>
    <td style="width: 60px; white-space: nowrap;">
        campaign (Numbers)
    </td>
    <td>
        <input name="ctl0Activities200" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities201" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities202" type="text" value="-1.00" />
    </td>
    <td>
        <input name="ctl0Activities203" type="text" value="-1.00" />
    </td>
</tr>      
</table>

簇
活动
资料
伦敦大学任务
伦敦大学
日内瓦大学的任务
日内瓦大学
呃。
提供
数
呃。
支持
活动（数字）

您需要更改

的

到

首先，为该行适当地指定一个类和样式，使其看起来像您想要的标题

<tr class="NewClass" style="background-color: buttonface;">
    <td scope="col">
        &nbsp;
    </td>
    <td scope="col">
        Cluster
    </td>
    <td scope="col">
        Activity
    </td>
    <td scope="col">
        Data
    </td>
    <td scope="col">
        <b>London_Tasks</b>
    </td>
    <td scope="col">
        <b>London_Achieved</b>
    </td>
    <td scope="col">
        <b>Geneva_Tasks</b>
    </td>
    <td scope="col">
        <b>Geneva_Achieved</b>
    </td>
</tr>

簇
活动
资料
伦敦大学任务
伦敦大学
日内瓦大学的任务
日内瓦大学

触发更改表的事件时，请使用.before

$('TriggerEntity').click(function(){

('.NewClass').before('<tr><th>&nbsp</th><th>London</th>...');

});

$（'TriggerEntity'）。单击（函数（）{
（'NewClass'）。在（'nbspLondon…'）之前；
});

首先，JSFIDLE：

这将使用jQuery，并将动态处理类名为

gv1

的相同结构的任何表。您可以根据需要进行更改：

<script>
// This function was taking from here: http://stackoverflow.com/questions/2815683/jquery-javascript-replace-tag-type
(function($) {    
        $.fn.replaceTagName = function(replaceWith) {
                var tags = [],
                        i    = this.length;
                while (i--) {
                        var newElement = document.createElement(replaceWith),
                                thisi      = this[i],
                                thisia     = thisi.attributes;
                        for (var a = thisia.length - 1; a >= 0; a--) {
                                var attrib = thisia[a];
                                newElement.setAttribute(attrib.name, attrib.value);
                        };
                        newElement.innerHTML = thisi.innerHTML;
                        $(thisi).after(newElement).remove();
                        tags[i - 1] = newElement;
                }
                return $(tags);
        };
})(window.jQuery);

$(function() {
        // This formats each table w/ the class 'gvv1' as specified in your question
            $('.gvv1').each(function(i, v) {
            city1 = $(this).find('th:eq(4)').text().split('_');
            city1 = city1[0];
            var city2 = $(this).find('th:eq(6)').text().split('_');
            city2 = city2[0];
            $(this).find('th:eq(4)').text('Tasks');
            $(this).find('th:eq(5)').text('Achieved');
            $(this).find('th:eq(6)').text('Tasks');
            $(this).find('th:eq(7)').text('Achieved');

            $(this).find('th').replaceTagName('td');

            $(this).prepend('<thead><tr><th colspan="4">&nbsp;</th><th colspan="2">' + city1 + '</th><th colspan="2">' + city2 + '</th></tr></thead>');

        });
});

//该功能从这里开始：http://stackoverflow.com/questions/2815683/jquery-javascript-replace-tag-type
（函数（$）{
$.fn.replaceTagName=函数（replaceWith）{
var标记=[]，
i=此长度；
而(我--){
var newElement=document.createElement（replaceWith），
thisi=this[i]，
thisia=thisi.属性；
对于（var a=thisia.length-1；a>=0；a--）{
var attrib=thisia[a]；
setAttribute（attrib.name、attrib.value）；
};
newElement.innerHTML=thisi.innerHTML；
$（thisi）.after（newElement.remove（）；
标签[i-1]=新元素；
}
返回$（标签）；
};
})（window.jQuery）；
$（函数（）{
//这将按照您的问题中指定的“gvv1”类设置每个表的格式
$（'.gv1'）。每个（函数（i，v）{
city1=$（this）.find（'th:eq（4）'）.text（）.split（'uz'）；
city1=city1[0]；
var city2=$（this）.find（'th:eq（6）'）.text（）.split（'uuz'）；
city2=city2[0]；
$（this.find（'th:eq（4））.text（'Tasks'）；
$（this）.find（'th:eq（5）'）.text（'acreated'）；
$（this）.find（'th:eq（6）'）.text（'Tasks'）；
$（this）.find（'th:eq（7）'）.text（'acreated'）；
$（this.find（'th'）.replaceTangame（'td'）；
$（this）.prepend（“”+city1+“”+city2+“”）；
});
});

你应该尝试一下。请发布代码。@techfoobar我可以在tr:first中使用grid和before在顶部添加行，但这些列是动态的，可以是1、5或10。我无法从列标题中删除文本并将其放在顶部。这（伦敦）只是一个例子，我不知道位置名称和城市名称列可以是任何数字，因此我需要从列标题中提取文本并放在顶部列中。