JQUERY - 表TD文本

时间:2013-05-29 11:46:50

标签: jquery

点击修改链接后,我尝试使用JQUERY从HTML下方获取 td 值 并将其分为3个单独的变量,如下面的

company=Microsoft Technologies
Period = 2011/3 - Current
designation = Software Engineer



<table summary="My Company" id="mylistbl">  
    <thead> 
        <tr>    
            <th scope="col">Company</th> 
            <th scope="col">Action</th> 
        </tr>  
    </thead>  
    <tbody>
        <tr object_type="999920113" object_id="872733">
            <td width="290">Microsoft Technologies<br><span style="font-size:11px; color:#555;">Period : 2011/3 - Current <br>Designation : Software Engineer</span>
            </td>
            <td><a href="#" title="Delete">Delete</a>/<a href="#" title="Edit">Edit</a>
            </td>  
        </tr>
    </tbody>
</table>



 $('body').on('click','a[title="Edit"]',
        function(){
            parObj=$(this).parent().parent(); 
            alert(parObj.children()[0].html);
            return false;
        });

我认为 parObj.children()[0] .html 中的某个地方我错误地得到了所需的文字

这是JSFiddle for it

http://jsfiddle.net/FjXLp/

4 个答案:

答案 0 :(得分:3)

你可以这样做:

$('body').on('click', 'a[title="Edit"]', function () {
    parObj = $(this).closest('tr');
    alert(parObj.children('td:eq(0)').html());

    // Get the first part like
    var main = parObj.children('td:eq(0)').html().split('<br>');
    var company = $.trim(main[0]);
    console.log(company);  // Microsoft Technologies

    // Second part like
    var Period  = $.trim(main[1].replace('<span style="font-size:11px; color:#555;">',''));
    console.log(Period);  // Period : 2011/3 - Current

    // Third part like
    var designation  = $.trim(main[2].replace('</span>',''));
    console.log(designation);   // Designation : Software Engineer
});

答案 1 :(得分:2)

你必须使用eq()来返回一个jquery对象:

http://jsfiddle.net/FjXLp/1/

alert(parObj.children().eq(0).html());

答案 2 :(得分:2)

试试这个:

parObj.children().eq(0).html()

当您使用parObj.children()[0]时,它提供了对第一个子节点的实际DOM元素的引用(如果没有子节点,则为undefined)并且DOM元素没有{{1属性。它们确实具有html属性,但通常的jQuery方法是使用innerHTML来获取包装在jQuery对象中的第一个子节点,然后使用jQuery .eq(0)方法。

答案 3 :(得分:1)

如果可能,我建议您将每个数据放在span标记内。然后你可以按如下方式处理它:

<td width="290">
    <span>Microsoft Technologies</span><br/>
    <span style="font-size:11px; color:#555;">Period : 2011/3 - Current</span><br/>
    <span>Designation : Software Engineer</span>
</td>
$(document).ready(function () {
    $('body').on('click', 'a[title="Edit"]', function() {
        var spans = $(this).parents('tr').children('td:first').children('span');
        var company = spans[0].innerHTML;
        var period = spans[1].innerHTML.split(':')[1];
        var designation = spans[2].innerHTML.split(':')[1];
        alert(company + ';' + period + ';' + designation);
    });
});

http://jsfiddle.net/FjXLp/2/