javascript - 使用 javascript 验证 html 表语法的正确性

Question

我想验证给定的 html 表语法对于所有 colspan 和 rowspan 定义是否正确。

Example on JSFiddle

下表在语法上是正确的:

<table id="correct">
    <tr>
        <td>a</td>
        <td>b</td>
        <td rowspan="2">c</td>
    </tr>
    <tr>
        <td colspan="2">d</td>
    </tr>
</table>

下一个表是错误的，因为列和行都不匹配:

<table id="wrong1">
    <tr>
        <td>a</td>
        <td>b</td>
        <td rowspan="1">c</td>
    </tr>
    <tr>
        <td colspan="1">d</td>
    </tr>
</table>

我希望能够验证表格是否正确或错误。给定的代码只是一个示例，它应该使用任何给定的表进行验证，无论其复杂程度如何。

我可以开始编写自己的验证器，但在此之前我想知道是否有任何库或已经可用的解决方案。你能帮我解决这个问题吗？

/编辑

刚刚找到这个在线验证器:

http://wet-boew.github.com/wet-boew/demos/tableparser/validator-htmltable.html

我的第一个错误表 #wrong1 抛出错误，但 #wrong2 不会(请参阅 fiddle )。好像不支持太大的数字。

Answer 1

好了，这是一个工作代码:

function validateTable(id){
    var rows = document.getElementById(id).tBodies[0].rows;
    var totalCells=0;
    // total rows and columns
    var totalRows=rows.length;;
    var totalColumns=0;;
    var foundCells=new Array();    
    var maxRows=rows.length;
    var maxColumns=0;
    var maxCellIndex = 0;
    // First we get totalRows and totalColumns
    for(var i=0;i<rows.length;i++){     
        totalColumns = Math.max(totalColumns,rows[i].cells.length);
    }

    // The matrix now should be totalRows x totalColumns
    for(var i=0;i<totalRows;i++){
        for(var j=0;j<totalColumns;j++){
            maxCellIndex = (i*totalColumns)+j;
            foundCells[ maxCellIndex ] = 0;
        }
    }

    for(var i=0;i<rows.length;i++){     
        maxColumns = Math.max(rows[i].cells.length,maxColumns);
        for(var j = 0;j<rows[i].cells.length;j++){
            var cellPosition = (i*totalColumns)+j;
            var cols=0;
            var tcells=0;
            cols = parseInt( rows[i].cells[j].rowSpan );           
            tcells = parseInt( rows[i].cells[j].colSpan );
            if(tcells>0){
                for(var k=0;k<tcells;k++){
                     foundCells[cellPosition + k] = 1; 
                }
            }
            if(cols > 0){
               for(var k=0;k<cols;k++){
                     foundCells[cellPosition + (k*totalColumns)  ] = 1;
                }
            }
           // totalCells += ( tcells * cols) ;
        }        
    }     
    // This is the updated part
    var allCellsAlignedCorrectly=true;
    for(var n=0;n<=maxCellIndex;n++){        
       if(isNaN(foundCells[n]) || parseInt(foundCells[n]) == 0){
          allCellsAlignedCorrectly = false;
       }
    }
    for(var n=0;n<=foundCells.length;n++){
        if(!isNaN(foundCells[n])){
           totalCells+=foundCells[n];
        }
    }
    // alert(foundCells);
    // alert(totalCells+":"+totalColumns+":"+totalRows);
    return (((totalCells) == (maxRows*maxColumns)) && allCellsAlignedCorrectly);
}

再次更新再次检查

您可以在这里看到它:

http://jsfiddle.net/UkV35/8/