獲取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

看看這是否有幫助（基於欺騙，它只能真正回答一半的問題）：

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