计算HTML表中的百分比 - jQuery

时间:2016-03-02 15:31:48

标签: javascript jquery html

我只想在第二行的html表中获取百分比 数据库共识

所以只是尝试了jQuery

var TableData = new Array();

jQuery('#myTable tr').each(function(row, tr){
    TableData[row]={
        "1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
        , "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
        , "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
        , "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
    }
}); 
TableData.shift(); 
TableData.sort();

var First = [];
var Second = [];
var Third = [];
var Fourth = [];


for (var i = 0; i < TableData.length - 1; i++) {
    if (TableData[i + 1]['1st'] == TableData[i]['1st']) {
    First.push(TableData[i]['1st']);
    }
    if (TableData[i + 1]['2nd'] == TableData[i]['2nd']) {
    Second.push(TableData[i]['2nd']);
    }
    if (TableData[i + 1]['3rd'] == TableData[i]['3rd']) {
    Third.push(TableData[i]['3rd']);
    }
    if (TableData[i + 1]['4th'] == TableData[i]['4th']) {
    Fourth.push(TableData[i]['4th']);
    }
}

var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");

但我没有得到正确的百分比:(

我在jQuery方面没有很好的经验但尝试过这是演示

http://jsfiddle.net/bcHsy/33/

1 个答案:

答案 0 :(得分:2)

我不是一个小提琴手,所以我不确定该链接是否会起作用,但我认为这可能有用:

Fiddle Link

我主要在一个部分更改了HTML:

    <tr>
        <td align="center" valign="middle" bgcolor="#ffffff"> 
        <p align="left">
            <a href="" target="blank"><span style="color: #d89b5a;"><strong>Database &nbsp; &nbsp; Consensus</strong></span></a>
        </p>
        </td>
        <td> 
        <p align="center">
            <span style="color: #d89b5a;">-------</span>
        </p>
        </td>
        <td> 
        <p align="center">
            <span style="color: #d89b5a;" class="1st">L.Tunsil</span>
        </p>
        </td>
        <td> 
        <p align="center">
            <span style="color: #d89b5a;" class="2nd">C.Wentz</span>
        </p>
        </td>
        <td> 
        <p align="center">
            <span style="color: #d89b5a;" class="3rd">J.Ramsey</span>
        </p>
        </td>
        <td> 
        <p align="center">
            <span style="color: #d89b5a;" class="4th">M.Jack</span>
        </p>
        </td>
    </tr>

和一些JS:

var TableData = new Array();
var Picks = new Array();    
jQuery('#myTable tr').each(function(row, tr){
                if (row == 1) {
        Picks[0] = jQuery.trim(jQuery(tr).find('td:eq(2)').text());
        Picks[1] = jQuery.trim(jQuery(tr).find('td:eq(3)').text());
        Picks[2] = jQuery.trim(jQuery(tr).find('td:eq(4)').text());
        Picks[3] = jQuery.trim(jQuery(tr).find('td:eq(5)').text());
        }
    TableData[row]={
        "1st" : jQuery.trim(jQuery(tr).find('td:eq(2)').text())
        , "2nd" :jQuery.trim(jQuery(tr).find('td:eq(3)').text())
        , "3rd" : jQuery.trim(jQuery(tr).find('td:eq(4)').text())
        , "4th" : jQuery.trim(jQuery(tr).find('td:eq(5)').text())
    }
}); 

TableData.shift();
TableData.shift();
TableData.sort();

var First = [];
var Second = [];
var Third = [];
var Fourth = [];


for (var i = 0; i < TableData.length; i++) {
    if (TableData[i]['1st'] == Picks[0]) {
    First.push(TableData[i]['1st']);
    }
    if (TableData[i]['2nd'] == Picks[1]) {
    Second.push(TableData[i]['2nd']);
    }
    if (TableData[i]['3rd'] == Picks[2]) {
    Third.push(TableData[i]['3rd']);
    }
    if (TableData[i]['4th'] == Picks[3]) {
    Fourth.push(TableData[i]['4th']);
    }
}

var first = First.length;
var total = TableData.length;
var percent = first/total * 100;
jQuery('.1st').text(First[0] + "\n" + "(" + percent + "%"+")");
var second = Second.length;
var percent = second/total * 100;
jQuery('.2nd').text(Second[0] + "\n" + "(" + percent + "%"+")");
var third = Third.length;
var percent = third/total * 100;
jQuery('.3rd').text(Third[0] + "\n" + "(" + percent + "%"+")");
var fourth = Fourth.length;
var percent = fourth/total * 100;
jQuery('.4th').text(Fourth[0] + "\n" + "(" + percent + "%"+")");