jjzjj

javascript - 通过点击表格行获取字段(td)值

coder 2024-07-28 原文

我需要你的帮助。

我有下表，详情如下。我想做的是单击表中的其中一行(不包括标题)并获取所选行的列值。

如何使用表格中所选行的信息填充文本框？

请不要使用图书馆。

<!DOCTYPE html>

<html>

<head>

</head>

<body>


<table id="myTable" cellspacing="1">             
    <thead>> 
        <tr> 
            <th>first name</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>diff</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>peter</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>9.99</td> 
            <td>20.3%</td> 
            <td>+3</td> 
        </tr> 
        <tr> 
            <td>john</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>19.99</td> 
            <td>25.1%</td> 
            <td>-7</td> 
        </tr> 
        <tr> 
            <td>clark</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>15.89</td> 
            <td>44.2%</td> 
            <td>-15</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>153.19</td> 
            <td>44%</td> 
            <td>+19</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>evans</td> 
            <td>56</td> 
            <td>153.19</td> 
            <td>23%</td> 
            <td>+9</td> 
        </tr> 
    </tbody> 
</table>

Firstname is:<input type="text" id="firstname" />
<br>
Lastname is:<input type="text" id="lastname" />
<br>
Age is:<input type="text" id="age" />
<br>
Total is:<input type="text" id="total" />
<br>
Discount is:<input type="text" id="discount" />
<br>
Diff is:<input type="text" id="diff" />
</body>

</html>

最佳答案

这是一个如何使用 event delegation 的例子在 javascript 中(对于动态添加的内容特别方便)。事件处理程序附加到 TABLE 元素的 onclick 属性:

function run(){
    document.getElementById('myTable').onclick = function(event){
        event = event || window.event; //for IE8 backward compatibility
        var target = event.target || event.srcElement; //for IE8 backward compatibility
        while (target && target.nodeName != 'TR') {
            target = target.parentElement;
        }
        var cells = target.cells; //cells collection
        //var cells = target.getElementsByTagName('td'); //alternative
        if (!cells.length || target.parentNode.nodeName == 'THEAD') { // if clicked row is within thead
            return;
        }
        var f1 = document.getElementById('firstname');
        var f2 = document.getElementById('lastname');
        var f3 = document.getElementById('age');
        var f4 = document.getElementById('total');
        var f5 = document.getElementById('discount');
        var f6 = document.getElementById('diff');
        f1.value = cells[0].innerHTML;
        f2.value = cells[1].innerHTML;
        f3.value = cells[2].innerHTML;
        f4.value = cells[3].innerHTML;
        f5.value = cells[4].innerHTML;
        f6.value = cells[5].innerHTML;
    }
}

JSFIDDLE:code/result page

另一种解决方案，其中事件处理程序直接附加到每个 TR 元素，如下所示:

function run() {
    var t = document.getElementById('myTable');
    var rows = t.rows; //rows collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
    for (var i=0; i<rows.length; i++) {
        rows[i].onclick = function () {
            if (this.parentNode.nodeName == 'THEAD') {
                return;
            }
            var cells = this.cells; //cells collection
            var f1 = document.getElementById('firstname');
            var f2 = document.getElementById('lastname');
            var f3 = document.getElementById('age');
            var f4 = document.getElementById('total');
            var f5 = document.getElementById('discount');
            var f6 = document.getElementById('diff');
            f1.value = cells[0].innerHTML;
            f2.value = cells[1].innerHTML;
            f3.value = cells[2].innerHTML;
            f4.value = cells[3].innerHTML;
            f5.value = cells[4].innerHTML;
            f6.value = cells[5].innerHTML;
        };
    }
}

JSFIDDLE:code/result page

关于javascript - 通过点击表格行获取字段(td)值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17979931/

javascripttdltgtdomhtml-table

有关javascript - 通过点击表格行获取字段(td)值的更多相关文章

  1. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  2. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  3. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  4. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  5. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  6. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  7. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  8. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  9. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  10. ruby - 从 Ruby 中的主机名获取 IP 地址 - 2

    我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge

随机推荐