Jquery - Таблица TD текст

Question

Я пытаюсь получить TD значения из ниже HTML, используя JQuery после нажатия на Редактировать ссылки и разделить его на 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 для него

http://jsfiddle.net/FjXLp/

Answer 1

Вы можете сделать это:

$('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 
}); 

Answer 2

Вы должны использовать eq(), который возвращает JQuery объект:

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

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

Answer 3

Попробуйте это:

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

Когда вы использовали parObj.children()[0], который дал вам ссылку на фактический элемент DOM, который является первым ребенком (или undefined, если детей не было), а элементы DOM не имеют имущества html. Они имеют свойство innerHTML, но обычным способом jQuery было бы использовать .eq(0), чтобы получить первый ребенок, завернутый в объект jQuery, а затем использовать метод jQuery .html().

Answer 4

Если это возможно, я бы рекомендовал Вам разместить каждые данные тега диапазона. После этого вы можете обработать его просто следующим образом:

<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/