获取jQuery创建的表格中某一列中所有单元格的数据

debugcn 发表于 Dev

用户11853168

我正在尝试在 jQuery 创建的表中为一列（可以是七列中的任何一列）建立一个单元格数据列表。我可以使用以下代码获得单个单元格。返回的数据是零或一（0 或 1），具体取决于单元格的背景颜色（可以是蓝色或红色）。

在下面的代码中，例如具有红色背景颜色的单元格 0,3（第 3 列中的第一个单元格）将返回：

Cell Data At [0,3] : 1

我希望对列中的每个单元格（有 29 行）执行此操作。例如，在第 3 列（第四列）中： 0,3 1,3 2,3 4,3... 到 28,3

它需要返回，例如：

Data At Column 3 : 0,0,0,1,0,0,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1

我想我需要构建一个 for 循环，但我什至不知道从哪里开始。

按钮：

<input type="text" placeholder="0,0" id="J_cellIndex" value="0,0"/> <button class="J_sheetControl" id="J_timingGetCell">GetCell</button>

html页面上的脚本：

$("#J_timingGetCell").click(function(ev){

            var cellIndex = $("#J_cellIndex").val().split(',');
            var cellData = sheet.getCellState(cellIndex);
            var $dataDisplay = $("#J_dataDisplay") ;

            $dataDisplay.html("<b>Cell Data At ["+cellIndex+"] : </b>"+cellData);
        });

外部js（第1部分）：

/*
 *  Get the status of the specified cell
 *  cellIndex : [2,3]
 *  @return : 0 or 1
 * */
this.getCellState = function(cellIndex){
    return sheetPrivate.cells[cellIndex[0]][cellIndex[1]].get();
}

外部js（第2部分）：

/*
            * Get cell status
            * cellIndex :[1,2]
            * @return : 0 or 1
            * */
            getCellState : function(cellIndex){
                return sheetModel.getCellState(cellIndex);
            },

这是从表格的 html 页面的来源显示的内容。我将从调试器中获取表格布局，并在我从一行编辑后立即发布：

<div id="dynamicTable"></div>

<div id="J_calenderWrapper">
  <table>
    <thead></thead>
    <tbody id="J_timedSheet">
    </tbody>
  </table>
</div>

我知道这可能是重复的，但我已经包含了这些信息，以防万一。我现在正在查看可能的重复帖子。这是所有单元格都是蓝色的表格布局（一个新的空白表格）。

我已经删除了从 2 到 27 的行：

<div id="J_calenderWrapper">
    <table>
        <thead></thead>
        <tbody id="J_timedSheet" class="TimeSheet">
            <tr>
                <td class="TimeSheet-head" style=""></td>
                <td title="" data-col="0" class="TimeSheet-colHead " style="">Sun</td>
                <td title="" data-col="1" class="TimeSheet-colHead " style="">Mon</td>
                <td title="" data-col="2" class="TimeSheet-colHead " style="">Tue</td>
                <td title="" data-col="3" class="TimeSheet-colHead " style="">Wed</td>
                <td title="" data-col="4" class="TimeSheet-colHead " style="">Thu</td>
                <td title="" data-col="5" class="TimeSheet-colHead " style="">Fri</td>
                <td title="" data-col="6" class="TimeSheet-colHead rightMost" style="">Sat</td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:15am 07:45am</td>
                <td class="TimeSheet-cell" data-row="0" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="0" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:45am 08:15am</td>
                <td class="TimeSheet-cell" data-row="1" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="1" data-col="6"></td>
            </tr>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead bottomMost " style="">09:15pm 09:45pm</td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="0"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="1"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="2"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="3"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="4"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="5"></td>
                <td class="TimeSheet-cell bottomMost rightMost" data-row="28" data-col="6"></td>
            </tr>
        </tbody>
    </table>
</div>

这是我输入数据的表格布局（将前 15 个单元格的第一列中的单元格背景更改为蓝色）。我已经删除了从 2 到 27 的行：

<div id="J_calenderWrapper">
    <table>
        <thead></thead>
        <tbody id="J_timedSheet" class="TimeSheet">
            <tr>
                <td class="TimeSheet-head" style=""></td>
                <td title="" data-col="0" class="TimeSheet-colHead " style="">Sun</td>
                <td title="" data-col="1" class="TimeSheet-colHead " style="">Mon</td>
                <td title="" data-col="2" class="TimeSheet-colHead " style="">Tue</td>
                <td title="" data-col="3" class="TimeSheet-colHead " style="">Wed</td>
                <td title="" data-col="4" class="TimeSheet-colHead " style="">Thu</td>
                <td title="" data-col="5" class="TimeSheet-colHead " style="">Fri</td>
                <td title="" data-col="6" class="TimeSheet-colHead rightMost" style="">Sat</td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:15am 07:45am</td>
                <td class="TimeSheet-cell TimeSheet-cell-selected" data-row="0" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="0" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="0" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead  " style="">07:45am 08:15am</td>
                <td class="TimeSheet-cell TimeSheet-cell-selected" data-row="1" data-col="0"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="1"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="2"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="3"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="4"></td>
                <td class="TimeSheet-cell" data-row="1" data-col="5"></td>
                <td class="TimeSheet-cell rightMost" data-row="1" data-col="6"></td>
            </tr>
            <tr class="TimeSheet-row">
                <td title="" class="TimeSheet-rowHead bottomMost " style="">09:15pm 09:45pm</td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="0"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="1"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="2"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="3"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="4"></td>
                <td class="TimeSheet-cell bottomMost" data-row="28" data-col="5"></td>
                <td class="TimeSheet-cell bottomMost rightMost" data-row="28" data-col="6"></td>
            </tr>
        </tbody>
    </table>
</div>

卢卡斯

看看这是否有帮助（基于欺骗，它只真正回答了一半的问题）：

$(".TimeSheet-colHead").on("click", function(){
var ind = $(".TimeSheet-colHead").index($(this))+2;
var vals = $("table tr td[class^='TimeSheet-cell']:nth-child("+ind+")").map(function() {
      return ( $(this).hasClass("TimeSheet-cell-selected")?1:0);
    }).get();

console.log(vals)   
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。