表格内容计算！急！谢谢！

<table id='tb'> 
<tr> 
<td>2006-5</td> 
<td>1</td> 
<td>结果</td> 
</tr> 
<tr> 
<td>2005-10</td> 
<td>2</td> 
<td>结果</td> 
</tr> 
<tr> 
<td>2003-5</td> 
<td>4</td> 
<td>结果</td> 
</tr> 
</table> 
<script>
function Cal()
{
  var tb=document.getElementById("tb");
  for(var i=0;i<tb.rows.length;i++)
  {
     var tr=tb.rows[i];
     var str1=tr.cells[0].innerHTML,str2=tr.cells[1].innerHTML;
     var ss=str1.split('-');
     tr.cells[2].innerHTML=parseInt(ss[0])+parseInt(str2)+"-"+ss[1];
  }
}
Cal();
</script>

解决方案 »

  1.   

    不急！
    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <table id="tbeDataSource"> 
            <tr> 
            <td>2006-5</td> 
            <td>1</td> 
            <td>结果</td> 
            </tr> 
            <tr> 
            <td>2005-10</td> 
            <td>2</td> 
            <td>结果</td> 
            </tr> 
            <tr> 
            <td>2003-5</td> 
            <td>4</td> 
            <td>结果</td> 
            </tr> 
        </table>
        <input type="button" id="btnCalc" value="calculate" />
        <script type="text/javascript">
        <!--
    var oTbe = document.getElementById("tbeDataSource");
    var oBtn = document.getElementById("btnCalc");
    oBtn.onclick = function()
    {
        var oRow, aYearMonth;
        var delimiter = "-";
        for (var i=0; i<oTbe.rows.length; i++)
        {
            oRow = oTbe.rows[i];
            aYearMonth = oRow.cells[0].innerText.split(delimiter);
            aYearMonth[0] = parseInt(aYearMonth[0]) + parseInt(oRow.cells[1].innerText);
            oRow.cells[2].innerText = aYearMonth.join(delimiter);
        }
    };
        //-->
        </script>
    </body>
    </html>
      

  2.   

    需要变色么？！
    加一句就行了！
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <table id="tbeDataSource"> 
            <tr> 
            <td>2006-5</td> 
            <td>1</td> 
            <td>结果</td> 
            </tr> 
            <tr> 
            <td>2005-10</td> 
            <td>2</td> 
            <td>结果</td> 
            </tr> 
            <tr> 
            <td>2003-5</td> 
            <td>4</td> 
            <td>结果</td> 
            </tr> 
        </table>
        <input type="button" id="btnCalc" value="calculate" />
        <script type="text/javascript">
        <!--
    var oTbe = document.getElementById("tbeDataSource");
    var oBtn = document.getElementById("btnCalc");
    oBtn.onclick = function()
    {
        var oRow, aYearMonth;
        var delimiter = "-";
        for (var i=0; i<oTbe.rows.length; i++)
        {
            oRow = oTbe.rows[i];
            aYearMonth = oRow.cells[0].innerText.split(delimiter);
            aYearMonth[0] = parseInt(aYearMonth[0]) + parseInt(oRow.cells[1].innerText);
            oRow.cells[2].innerText = aYearMonth.join(delimiter);
            oRow.cells[2].style.color = "#ff0000";
        }
    };
        //-->
        </script>
    </body>
    </html>
      

  3.   

    <table id="tab"> 
    <tr> 
    <td> 2006-5 </td> 
    <td> 1 </td> 
    <td> 结果 </td> 
    </tr> 
    <tr> 
    <td> 2005-10 </td> 
    <td> 2 </td> 
    <td> 结果 </td> 
    </tr> 
    <tr> 
    <td> 2003-5 </td> 
    <td> 4 </td> 
    <td> 结果 </td> 
    </tr> 
    </table>
    <script>
    var tab=document.getElementById("tab");
    for(var i=0,j=tab.rows.length;i<j;i++){
        var td=tab.rows[i].cells;
        td[2].innerHTML=parseInt(td[0].innerHTML.match(/^\s*(\d{4})/)[1])+parseInt(td[1].innerHTML)+"-"+td[0].innerHTML.match(/\-(\d{1,2})\s*$/)[1];
    }
    </script>
      

  4.   

    谢谢各位！
    还需要大家帮帮忙！
    如果加两个下拉框如何办？
    <table> 
    <tr> 
    <td> 
    <select name="year1" style="width:10px" onChange="oBtn()">
            <option value="2006">2006</option>
               </select>
    <select name="month1" style="width:10px" onChange="oBtn()">
            <option value="5">5</option>
               </select>
    </td> 
    <td> 1 </td> 
    <td> 结果 </td> 
    </tr> 
    <tr> 
    <td> <select name="year2" style="width:10px" onChange="oBtn()">
            <option value="2003">2003</option>
               </select>
    <select name="month2" style="width:10px" onChange="oBtn()">
            <option value="5">5</option>
               </select>
    </td> 
    <td> 2 </td> 
    <td> 结果 </td> 
    </tr> 
    <tr> 
    <td> <select name="year3" style="width:10px" onChange="oBtn()">
            <option value="2005">2005</option>
               </select>
    <select name="month3" style="width:10px" onChange="oBtn()">
            <option value="10">10</option>
               </select></td> 
    <td> 4 </td> 
    <td> 结果 </td> 
    </tr> 
    </table> 
    只要选择下拉框后面的结果跟着变化！这个该如何解决？劳驾各位再帮帮忙！
      

  5.   

    不好意思上面的表格有些问题！大家用这里的表格！还是只加年
      <table>   
    <tr>   
    <td width="157">   
    <select   name="year1"   style="width:70px"   onChange="oBtn()"> 
                    <option   value="2006"> 2006 </option> 
    <option   value="2005"> 2005 </option> 
     <option   value="2004"> 2004 </option> 
    <option   value="2003"> 2003 </option> 
          </select> 
    <select   name="month1"   style="width:50px"   onChange="oBtn()"> 
                    <option   value="5"> 5 </option> 
    <option   value="10"> 10 </option> 
          </select> 
    </td>   
    <td width="14">   1   </td>   
    <td width="73">   结果   </td>   
    </tr>   
    <tr>   
    <td>   <select   name="year2"   style="width:70px"   onChange="oBtn()"> 
                    <option   value="2006"> 2006 </option> 
    <option   value="2005"> 2005 </option> 
     <option   value="2004"> 2004 </option> 
    <option   value="2003"> 2003 </option> 
                          </select> 
    <select   name="month2"   style="width:50px"   onChange="oBtn()"> 
                     <option   value="5"> 5 </option> 
    <option   value="10"> 10 </option> 
                          </select> 
    </td>   
    <td>   2   </td>   
    <td>   结果   </td>   
    </tr>   
    <tr>   
    <td>   <select   name="year3"   style="width:70px"   onChange="oBtn()"> 
                    <option   value="2006"> 2006 </option> 
    <option   value="2005"> 2005 </option> 
     <option   value="2004"> 2004 </option> 
    <option   value="2003"> 2003 </option> 
                          </select> 
    <select   name="month3"   style="width:50px"   onChange="oBtn()"> 
                    <option   value="5"> 5 </option> 
    <option   value="10"> 10 </option> 
                          </select> </td>   
    <td>   4   </td>   
    <td>   结果   </td>   
    </tr>   
    </table>   
      

  6.   

    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <table>
            <tr>
                <td width="157">
                    <select name="year1" style="width: 70px" onchange="oBtn(this)">
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                    </select>
                    <select name="month1" style="width: 50px" onchange="oBtn(this)">
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select>
                </td>
                <td width="14">
                    1
                </td>
                <td width="73">
                    结果
                </td>
            </tr>
            <tr>
                <td>
                    <select name="year2" style="width: 70px" onchange="oBtn(this)">
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                    </select>
                    <select name="month2" style="width: 50px" onchange="oBtn(this)">
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select>
                </td>
                <td>
                    2
                </td>
                <td>
                    结果
                </td>
            </tr>
            <tr>
                <td>
                    <select name="year3" style="width: 70px" onchange="oBtn(this)">
                        <option value="2006">2006</option>
                        <option value="2005">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                    </select>
                    <select name="month3" style="width: 50px" onchange="oBtn(this)">
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select>
                </td>
                <td>
                    4
                </td>
                <td>
                    结果
                </td>
            </tr>
        </table>
        <script type="text/javascript">
        <!--
    function oBtn(oTarget)
    {
        if (oTarget)
        {
            var sYear, sMonth;
            if (oTarget.name.indexOf("year") > -1)
            {
                sYear = oTarget.value;
                sMonth = getNextSiblingValue(oTarget);
            }
            else
            {
                sYear = getPreviousSiblingValue(oTarget);
                sMonth = oTarget.value;
            }
            var oRow = oTarget.parentNode.parentNode;
            oRow.cells[2].innerText = (parseInt(sYear) + parseInt(oRow.cells[1].innerText)) + "-" + sMonth;
            oRow.cells[2].style.color = "#ff0000";
        }
    }
    function getNextSiblingValue(oTarget)
    {
        do
        {
            oTarget = oTarget.nextSibling;
        }
        while (oTarget && oTarget.nodeType != 1);    if (oTarget) return oTarget.value;
    }
    function getPreviousSiblingValue(oTarget)
    {
        do
        {
            oTarget = oTarget.previousSibling;
        }
        while (oTarget && oTarget.nodeType != 1);    if (oTarget) return oTarget.value;
    }
        //-->
        </script>
    </body>
    </html>