jQuery : Merge column of table

标签 jquery html css merge html-table

我想合并两个相邻的表格最后一列的单元格具有相同的文本:

enter image description here

我有这段代码,但它会检查相邻行的单元格:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $('#sample_1 tbody tr:nth-child(4) td:nth-child(4)').each(function(){
            alert( $(this).text());

            var colSpan=1;
            while( $(this).text() == $(this).next().text() ){

                $(this).next().remove();
                colSpan++;
            }
            $(this).attr('colSpan',colSpan);
        });
    });
</script>

这是表格HTML的代码源:

<table class="table table-striped table-bordered dataTable TF" id="sample_1" aria-describedby="sample_1_info">
    <tbody role="alert" aria-live="polite" aria-relevant="all">
        <tr class="fltrow">
            <td colspan="4">
                <input id="flt0_sample_1" type="text" ct="0" class="single_flt">
            </td>
        </tr>
        <tr class="gradeX odd">
        </tr>
        <tr role="row">
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Nom</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Prénom</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Numéro Teléphone</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">heure de rdv</th>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                MOSTEFAOui                                                    
            </td>
            <td class="hidden-phone ">
                MAiNE                                                    
            </td>
            <td class="hidden-phone ">
                0555122844                                                    
            </td>
             <td class="hidden-phone " colspan="1">
                09:00                                                    
            </td>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                ADJOUT                                                    
            </td>
            <td class="hidden-phone ">
                ABDELKADER                                                   
            </td>

            <td class="hidden-phone ">
                0775522355                                                   
            </td>
            <td class="hidden-phone ">
                10:00                                                   
            </td>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                SANAD                                                   
            </td>
            <td class="hidden-phone ">
                MILOUD                                                    
            </td>

            <td class="hidden-phone ">
                0661225412                                                    
            </td>
             <td class="hidden-phone ">
                10:00                                                    
            </td>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                ACHAOUR                                                   
            </td>
            <td class="hidden-phone ">
                MOHAMED                                                    
            </td>

            <td class="hidden-phone ">
                0555122265                                                    
            </td>
             <td class="hidden-phone ">
                10:00                                                    
            </td>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                TARFAUI                                                    
            </td>
            <td class="hidden-phone ">
                MORAD                                                    
            </td>

            <td class="hidden-phone ">
                0788745211                                                   
            </td>
             <td class="hidden-phone ">
                10:00                                                   
            </td>
        </tr>
        <tr role="row">
            <td class="hidden-phone ">
                TANEM                                                    
            </td>
            <td class="hidden-phone ">
                LAKHDAR                                                    
            </td>

            <td class="hidden-phone ">
                0666115487                                                    
            </td>
             <td class="hidden-phone ">
                11:00                                                    
            </td>
        </tr>
    </tbody>
</table>

最佳答案

不是最优雅的解决方案,但它确实有效。

我在您的第 4 列中添加了一个名为“heure”的类

<td class="heure">11:00</td>

以及以下对您的 JS 的更改

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        var topMatchTd;
        var previousValue = "";
        var rowSpan = 1;

        $('.heure').each(function(){

            if($(this).text() == previousValue)
            {
              rowSpan++;
              $(topMatchTd).attr('rowspan',rowSpan);
              $(this).remove();
            }
            else
            {
              topMatchTd = $(this);
              rowSpan = 1;
            }

            previousValue = $(this).text();
        });
    });
</script>

关于jQuery : Merge column of table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34158092/

相关文章:

javascript - jQuery加载函数在Firefox中引发“XML解析错误:格式不正确”错误

javascript - 没有内联脚本,仍会“由于内容安全策略指令而被拒绝:” script-src'self'”

javascript - XPath:选择包含规范化文本的节点,不包括祖先节点

javascript - 将重复的JQuery代码转换为干净的代码

css - 将fluidRow样式从ui.R移至www/styles.css

jquery - jQuery标签输入插件ASP.NET无法正常工作

javascript - .last() 和 :last 的性能差异

jquery - jQuery slideDown/Up和响应式设计

javascript - 在网站 Bootstrap 上更改容器的背景颜色

html - 在此上下文中元素样式不允许作为元素主体的子元素(&lt;style scoped> 未验证)