Добавить атрибут идентификатора данных в <td> в моем JQuery

Question

У меня есть Table, Textarea и Button. Когда пользователь внутри Textarea, а затем нажимает на мой Button текст добавляется к Table в ряд с помощью следующего кода:

<script type="text/javascript"> 
$(function() { 
    $('#CustomButton').click(function() { 
     $('#CustomPickedTable tbody').append(
      $('<tr/>', 
      { 
      click: function() { 
        $(this).remove(); 
        }, 
       html: $('<td/>', { 
        text: $('#CustomQuestionText').val() 
       }) 
      }) 
     ); 
     return false; 
    }); 
}); 
</script> 

Когда пользователь внутри TextArea, а затем нажимает на Button, что мой Table Tbody получает это <td>What user typed..</td> что я хотел бы, что моя таблица получает <td data-test-id="5">what user typed..</td>.

есть ли какие-либо решения, что в моей JQuery так мой <td> получает атрибут для передачи данных тест-идентификатор?

Заранее спасибо!

Answer 1

Вы можете сделать это таким образом

$('#CustomButton').click(function() { 
    $('#CustomPickedTable tbody').append(
     $('<tr/>', { 
      html: $("<td />", { 
       html: $("#CustomQuestionText").val(), 
       'data-attr-id': 5 

      }) 
     }) 
    ); 
    return false; 
}); 

• Demo: Working Solution
• Demo: With remove

Answer 2

попробовать

{ 
       click : function() {$(this).remove();}, 
       html: $('<td/>', {text: $('#CustomQuestionText').val()}, 
       attr : { 'data-test-id' : 'whatever' } 
    } 

Reference

Answer 3

объявить динамический идентификатор vairable и получить подсчет строк таблицы в нем, а затем применить его к тд элементу ID

var dynamicId = document.getElementById("yourtable").getElementsByTagName("TR").length; 

html: $('<td data-test-id="' + dynamicId + '"/>', { 
       text: $('#CustomQuestionText').val() 
      })