Question

为什么这不起作用的任何想法？

我试图获取它，以便每次有一个带有类＆＃34; insert_name＆＃34;的元素时，从表中打印出该名称。

您是否也可以帮助我使选择更加高级（例如，仅使用＆＃34;客户资料＆＃34;类中第一个tr的数据？

谢谢！

HTML

<body onload="printMsg()">
<div id="api_data" style="display:none;">
    <div class="client-profile">
        <div class="head icon-5">Customer Details</div>
        <table id="client-information">
            <tbody>
                <tr>
                    <td class="left">Name:</td>
                    <td class="color"><a href="/profile">Matthew Tester</a>

                    </td>
                </tr>
                <tr class="dark">
                    <td class="left">E-mail:</td>
                    <td class="color">asdfg</td>
                </tr>
                <tr>
                    <td class="left">Registration:</td>
                    <td class="color">2013-11-21</td>
                </tr>
                <tr class="dark">
                    <td class="left">Status:</td>
                    <td class="color"><span class="active">Active</span>

                    </td>
                </tr>
                <tr>
                    <td class="left">Last Login Time:</td>
                    <td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
                </tr>
                <tr class="dark">
                    <td class="left">Last Login From:</td>
                    <td class="color">123.123.123.123</td>
                </tr>
                <tr>
                    <td class="left">Location:</td>
                    <td class="color">United Kingdom</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="insert_name"></div>
</body>

的Javascript

(function printMsg() {
    var node = document.getElementsByClassName('insert_name');
    node.innerHTML = $('[class*="color"]').eq(0).text();
})();

Answer 1

<强> jsFiddle Demo

问题在于节点选择。按类名选择时，它返回一个元素数组。由于您只查找具有该类名的div，因此请访问第一个索引以引用它。

var node = document.getElementsByClassName('insert_name')[0];

修改的

要使这个迭代所有节点，你可以采用这种方法

 var nodes = document.getElementsByClassName('insert_name');
 var text = $('[class*="color"]').eq(0).text();
 for(var i = 0; i < nodes.length; i++){
  nodes[i].innerHTML = text;
 }

或者，由于已经包含了jQuery，您可以删除正文的onload事件并使用此

<强> jsFiddle Demo

$(function(){
 $('.insert_name').html($('[class*="color"]').eq(0).text());
});

要确保此操作仅作用于client-profile类，选择器将

$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());

Answer 2

如果您只是想插入名称而不是所有内容，这应该可以解决问题：

$(function() {
    $('.insert_name').text($('td:contains("Name:")').next().text());
});

这是小提琴：

http://jsfiddle.net/b8LKQ/

希望有所帮助！

Answer 3

我添加了一点jQuery：

$(function() {
    $('[class*="color"]').each(function(){
        $('.insert_name').append($(this).text());
    });
});

http://jsfiddle.net/zk4pc/7/ 希望有所帮助！

使用JQuery选择内容

3 个答案: