从 html 表格单元格中获取内容值,并使用 javascript 使其显示在文本框中

Get content value from a html table cell and make it appear to the textbox using javascript

本文关键字:javascript 显示 文本 单元格 表格 html 获取      更新时间:2023-09-26

我从可滚动的HTML表格的单元格中检索值时遇到问题。我已经修改了一些javascript代码,但它们似乎不起作用。请帮助我,我对javascript很陌生。这是我的以下代码:

爪哇语

var rowIndex = 0;
var cellIndex = 0;
var nTable = "";
var nRows = 0;
var nCells = 0;
function showCoords(r,c)
{
    rowIndex = r;
    cellIndex = c;
    if(r!=0 && nTable.rows[r].cells[c].tagName != "th")
    {
var selectedValue = nTable.rows[r].cells[0].innerHTML;
        document.getElementById('celldata1').value=selectedValue;
var selectedValue = nTable.rows[r].cells[1].innerHTML;
        document.getElementById('celldata2').value=selectedValue;
var selectedValue = nTable.rows[r].cells[2].innerHTML;
        document.getElementById('celldata3').value=selectedValue;
    }
}
function getCoords(currCell)
{
    for (i=0; i<nRows; i++)
    {
        for (n=0; n<nCells; n++)
        {
            if (nTable.rows[i].cells[n] == currCell)
            {
                showCoords(i,n);
            }
        }
    }
}
function mapTable()
{
    nTable = document.getElementsByTagName("table")[1]
    nRows = nTable.rows.length;
    nCells = nTable.rows[0].cells.length;
    for (i=0; i<nRows; i++)
    {
        for (n=0; n<nCells; n++)
        {
            nTable.rows[i].cells[n].onclick = function()
            {
                getCoords(this);                    
            }
            nTable.rows[i].cells[n].onmouseover = function()
            {
                this.style.cursor = 'pointer';              
            }
        }
    }
}
onload=mapTable;

不确定上面的javascript代码在语法或逻辑上是否出错,但如果有人帮助我指出它们,我会很高兴。

网页代码:-

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>My Content</title>
        <link rel="stylesheet" text="css/text" href="mycss.css" title=""></link> 
        <script type ="text/javascript" src="test.js"></script>     
    </head>

正文部分 1

这是我希望值相应地显示在表格的每个单元格中的每个文本框中的部分。

    <body>
           <table border="0">
                <tbody>
                    <tr>
                        <td>Content 1:</td>
                        <td><input id="celldata1" type="text" name="content1" value="" /></td>
                    </tr>
                    <tr>
                        <td>Content 2:</td>
                        <td><input id="celldata2" type="text" name="content2" value="" /></td>
                    </tr>
                    <tr>
                        <td>Content 3:</td>
                        <td><input id="celldata3" type="text" name="content3" value="" /></td>
                    </tr>
                </tbody>
            </table>

身体部分 2

这是表一。

            <table border="1" id="tableone">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Content 1</th>
                        <th>Content 2</th>
                        <th>Content 3</th>
                    </tr>
                </thead>
                <tbody> 
                    <%! int i;%>
                    <%for(int i=0; i<50; i++){%>
                        <tr>
                        <td><%=i+1%></td>
                        <td></td>
                        <td></td>
                        <td></td
                        </tr>
                    <%}%>
            </tbody>
            </table>
        </div>

顺便说一下,如果我的英语不好,很抱歉:)

我为此使用 jQuery:

// Iterate throught rows of table:
jQuery("table").find("tr").each( function() {
    var currentRow = jQuery(this);
    // Iterate throught cell in current row: 
    currentRow.find("td").each(function() {
        var currentCell = jQuery(this);
        // Do what you want with cell
    });
});