2016-01-23 18 views
2

Я хочу вызвать событие для обмена данными ячейки таблицы.onchange событие таблицы td?

// производящая кодовая таблица

<table id=custorder2 > <head> <tr> <td>change it</td> </tr> </head> <tbody> <tr> <td>1</td> </tr> </tbody> </table> 

// для запуска что-то событие, как этот

$(document).ready(function(){ 
    $('#custorder2 tr td').change(function() { 
     console.log("call"); 
    }) 
}) 

об изменении значения ячейки должен быть напечатан этот вызов.

+0

тд не является входным элементом, значение которого может измениться? Вы подразумевали «изменение» программно? – gurvinder372

+0

да, вы получите это правильно – RishiPandey

+0

onChange не работает для td или tr – Raviteja

ответ

1

Вы можете попытаться использовать такие события, как DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved или их комбинацию.

$('#custorder2 tr td').on("DOMSubtreeModified", function(){ 
 
    alert('changed'); 
 
}); 
 
$('button').on('click', function(){ 
 
    $('#custorder2 tr td').text(this.id); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id=custorder2 > <head> <tr> <td>change it</td> </tr> </head> <tbody> <tr> <td>1</td> </tr> </tbody> </table> 
 
<button id="id1">Change 1</button> 
 
<button id="id1">Change2</button>

+0

Это не сработало для меня , однако аналогичный [ответ] (https://stackoverflow.com/a/28044851/3976696) с использованием '$ (« # custorder2 ») .bind (« DOMSubtreeModified », function() {})' сделал. – sc28

2

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

<script language="javascript"> 
function dotest(element,event) 
{ 
    //GET THE CONTENT as TEXT ONLY, you may use innerHTML as required 
    alert("content " + element.textContent) 

} 
</script> 
<table cellpadding="2" cellspacing="0" border="1" width="100%"> 
    <tr> 
<td contenteditable="true" onkeyup="javascript:dotest(this,event);"> 

    Testing 
</td> 
</tr> 
</table> 

Полагается на атрибут html5 и нажатием клавиши (В сценариях, где клетки могут be напрямую редактируется)

Упование вы считаете полезным

-1

Кстати, событие on-change не работает на tr или td, но если вы хотите попробовать, вы можете пройти через код ниже.

В своем коде я думаю, что цель не была признана, поэтому попробуйте сделать:.

$("#custorder > tr > td").change(function(){ 
}); 

Вместо ("#custorder т.р. тд") изменить (функция() {});

HTML:

<table id=custorder2 > 
<head> 
    <tr> 
     <td>change it</td> 
    </tr> 
</head>   
<tbody> 
    <tr> 
     <td>1</td> 
    </tr> 
</tbody> 
</table> 

Javascript:

$("#custorder > tr > td").change(function() { 
    console.log("inside change event"); 
}); 
+0

Что делать, если таблица создается динамически .. она будет работать. – RishiPandey

+0

Я использовал этот метод в своем коде, он не работает – RishiPandey

+0

Даже если ваша таблица создается динамически, тогда также я не думаю, что она будет работать. –

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