Question

大家好，我不知道这是否是一个新程序员应该是真的，但是我的问题就在于此。我目前有一个13列的表，大约有400行。是的，我知道这是一张大桌子，不幸的是它只会越来越大。我试图用这个表来实现，不知何故，是有一个功能，检查第12个coloumn中的单元格内容（日期dd / mm / yyyy），如果日期已经过去，它将添加一个CSS到行。

通过一些非常聪明的程序员的帮助，我有一个应该有效的代码。但我无法以任何方式使它工作。

任何人都可以帮我解决这个问题。

感谢。

我的代码是：

<script language="javascript">
$(document).ready(function() {
function parseDate(dateString)
{
return new Date(Date.parse(dateString));
}

$('#names tr').each(function(index)
{
var row = $(this);
if (parseDate(elem.find("td:eq(1)").text()) < new Date())
row.addClass('row');
});
});

</script>

我的表格如下：

<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>Date</td>
<td>Date</td>
<td>Data</td>
</tr>

好的，这就是我现在所拥有的：

<html>
<head>
<style>
#sprog tr {
background: #00FF00;
}

#sprog tr.past {
background: #FF0000;
}
</style>
<script src="jquery 1.4.2.js"></script>
<script>
$(function()
{
$('#sprog .date').each(function()
{
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date)
{
$(this).parent('tr').addClass('past');
}
}
);
}
);
</script>
<title>cells</title>
</head>

<body>
<table id="sprog">
<tbody>
<tr>
<td>14/08/2010</td>
<td>20/10/2015</td>
</tr>
<tr>
<td>2</td>
<td class="date">14/10/2010</td>
</tr>
<tr>
<td>3</td>
<td class="date">04/10/2010</td>
</tr>
<tr>
<td>10/12/2010</td>
<td class="date">12/10/2010</td>
</tr>
<tr>
<td>12/10/2010</td>
<td class="date">01/01/1900</td>
</tr>
</tbody>
</table>
</body>
</html>

Answer 1

纯JavaScript应该有效：

var theTable = $('yourTable').tBodies[0];

for(x=0;x<theTable.rows.length;x++) {
  if(theTable.rows[x].cells[11]=='foo') {
    theTable.rows[x].cells[11].style.whatever= 'bar';
  }
}

代码未经测试 - 抱歉 - 但应该还不错。

一个很好的解释：http://www.howtocreate.co.uk/tutorials/javascript/domtables

Answer 2

HTML：

<table id="dates_table">
    <tr>
        <th>Name</th>
        <th>Date of Birth</th>
    </tr>
    <tr>
        <td>Bob</td>
        <td class="date">01/02/2003</td>
    </tr>
    <tr>
        <td>Johnny</td>
        <td class="date">03/02/1980</td>
    </tr>
    <tr>
        <td>Ted</td>
        <td class="date">14/12/2010</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td class="date">08/08/2005</td>
    </tr>
</table>

CSS：

#dates_table tr {
    background: #00FF00;
}

#dates_table tr.past {
    background: #FF0000;
}

JavaScript的：

$(function()
{
    $('#dates_table .date').each(function()
    {
        var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
        var now_date = new Date().getTime();
        if(row_date < now_date)
        {
            $(this).parent('tr').addClass('past');
        }
    }
    );
}
);

注意我已将class="date"添加到日期<td>，因此这个位置不会产生任何影响。

现场演示：http://jsfiddle.net/LPjfS/2/

Answer 3

好的，经过一番挖掘后我发现我没有正确调用jquery，我应该看起来像这样：

<html>
<head>
<title>trial cell highlight</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body {
background-color: transparent;
padding: 10px;
}
#demotable1 tr {
background: white;
}

#demotable1 tr.past {
background: #FF0000;
color: #999999;
}
</style>
<script type="text/javascript">
//<![CDATA[

$(function()
{
$('#demotable1 .date').each(function()
{
var cell_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(cell_date < now_date)
{
$(this).parent('tr').addClass('past')
}
}
);
}
);

//]]>
</script>
</head>
<body>
<table id="demotable1">
<tbody>
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>Bob</td>
<td class="date">01/02/2003</td>
</tr>
<tr>
<td>Johnny</td>
<td class="date">03/02/1980</td>
</tr>
<tr>
<td>Ted</td>
<td class="date">14/12/2010</td>
</tr>
<tr>
<td>Jane</td>
<td class="date">08/08/2005</td>
</tr>
</tbody>
</table>
</body>
</html>

感谢每一位帮助我解决这个问题的人。

突出显示过去日期的单元格

3 个答案: