2013-07-22 2 views
0

Команда,Как обновить ячейку таблицы HTML с помощью jquery

Не могли бы вы рассказать мне, как обновить ячейку с помощью jquery?

<table id='lop'> 
    <thead id='loph'> 
     <tr> 
      <td class='type'>Type</td> 
      <td class='name'>Name</td> 
     </tr> 
    </thead> 
    <tbody id='lopb'> 
     <tr id='1'> 
      <td class='type'>W</td> 
      <td class='name'>ZZZ</td> 
     <tr> 
     <tr id='2'> 
      <td class='type'>W</td> 
      <td class='name'>YYY</td> 
     <tr>   
    </tbody> 
</table> 

Я хотел бы обновить второе имя строки до XXX с YYY.
Пожалуйста, ответ должен быть основан на имени id и классе, используемом в html, а не на номере/порядке, основанном на использовании jquery.

Также ниже решение не работает,

$('#lop #2 .name').html('XXX') //Working 

в случае

var rowID = '#2'; 
$('#lop rowID .name').html('XXX') //Not Working 

ответ

4

Попробуйте этот код, который использует html method обновить код:

$('#lop #2 .name').html('XXX') 

Вы можете посмотреть на эту скрипку: http://jsfiddle.net/cWQRY/

Если вы хотите сделать это с переменной, вы можете попробовать этот код:

var rowID = '#2'; 
$('#lop '+rowID+' .name').html('XXX') 
+0

Какая польза, если я использую .html, чем .text ?? –

+0

В этом случае нет никакой пользы. Но с помощью html-метода вы можете редактировать текст и html-код, если есть. –

+0

Спасибо !. Не могли бы вы также указать ссылку на синтаксис для $ ('# id1 # id2 .className). Это применимо только к таблице или может использовать ее в какой-либо другой структуре dom. –

2

убедитесь, что вы не использовать целые числа в качестве идентификаторов использовать строку ..

<tr id='id2'> 

почему:

1) Он нарушает спецификацию W3C.

2) Это вредно для SEO.

3) Там может быть на стороне сервера сценариев выдает

JQuery

$('#id2 .name').text('XXX') 
+0

+1 Спасибо. Я буду использовать строку. –

0

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

$('#2 .name).text('XXX'); 
0
Try this: 

* { 
    font-family:Consolas 
} 

.editableTable { 
    border:solid 1px; 
    width:100% 
} 

.editableTable td { 
    border:solid 1px; 
} 

.editableTable .cellEditing { 
    padding: 0; 
} 

.editableTable .cellEditing input[type=text]{ 
    width:100%; 
    border:0; 
    background-color:rgb(255,253,210); 
} 

Example: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425 
0

В таблице, использующей идентификатор в каждом tr и td, не является хорошей практикой, лучше использовать индекс.

$('#lopb tr').filter(':eq(1) td.name').text('XXX'); 
0
$('#lop').each(function(){ 
       var $row = $(this).parents('tr');     
       alert($row.find('td:eq(0)').html()); 
       alert($row.find('td:eq(1)').html()); 
      }); 
0

Пожалуйста, укажите, когда вы хотите сделать это действие изменения данных клеток.

Для изменения, пожалуйста, попробуйте,

$('#2 .name').html('XXX') 

Благодаря Manikandan

Смежные вопросы