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

Question

我正在尝试在 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>

Answer 1

看看这是否有帮助(基于 dupe，它只真正回答了一半的问题):

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