Como faço para criar uma tabela HTML usando o jQuery dinamicamente?
estou a tentar criar uma tabela HTML como a seguinte usando dinamicamente jQuery:
<table id='providersFormElementsTable'>
<tr>
<td>Nickname</td>
<td><input type="text" id="nickname" name="nickname"></td>
</tr>
<tr>
<td>CA Number</td>
<td><input type="text" id="account" name="account"></td>
</tr>
</table>
Esta é a minha tabela actual:
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
Este é o método que irá criar tr e td elementos tomando id e labelText:
function createFormElement(id, labelText) {
// create a new textInputBox button using supplied parameters
var textInputBox = $('<input />').attr({
type: "text", id: id, name: id
});
// create a new textInputBox using supplied parameters
var inputTypeLable = $('<label />').append(textInputBox).append(labelText);
// append the new radio button and label
$('#providersFormElementsTable').append(inputTypeLable).append('<br />');
}
Também tenho um valor que será mostrado como Ponta da ferramenta.
Por favor, ajude-me a criar uma mesa dinamicamente comtool tip and tr td.
editar:
Eu quase terminei com o seguinte código:
function createProviderFormFields(id, labelText,tooltip,regex) {
var tr = '<tr>' ;
// create a new textInputBox
var textInputBox = $('<input />').attr({
type: "text",
id: id, name: id,
title: tooltip
});
// create a new Label Text
tr += '<td>' + labelText + '</td>';
tr += '<td>' + textInputBox + '</td>';
tr +='</tr>';
return tr;
}
Aqui A etiqueta está a chegar correctamente e a caixa de entrada não está a chegar e mostra {[[9]} onde a caixa de texto tem de vir...
quando imprimi o textInputBox usando console.log, obtenho o seguinte:
[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]
5 answers
Pode usar duas opções:
- createElement
- InnerHTML
Criar elemento é a maneira mais rápida (verificar aqui .):
$(document.createElement('table'));
InnerHTML é outra abordagem popular:
$("#foo").append("<div>hello world</div>"); // Check similar for table too.
Verifique um exemplo real em Como criar uma nova tabela com linhas usando o jQuery e enrole-a dentro do div.
Pode haver outras abordagens também. Por favor, use isto como ponto de partida e não como um copy-paste solucao.
Editar:
Verificar criação dinâmica da tabela com DOM
Editar 2:
IMHO, estás a misturar objecto e HTML interior. Vamos tentar com uma abordagem html interna pura:function createProviderFormFields(id, labelText, tooltip, regex) {
var tr = '<tr>' ;
// create a new textInputBox
var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';
// create a new Label Text
tr += '<td>' + labelText + '</td>';
tr += '<td>' + textInputBox + '</td>';
tr +='</tr>';
return tr;
}
Um exemplo com um pouco menos de html:
var container = $('#my-container'),
table = $('<table>');
users.forEach(function(user) {
var tr = $('<tr>');
['ID', 'Name', 'Address'].forEach(function(attr) {
tr.append('<td>' + user[attr] + '</td>');
});
table.append(tr);
});
container.append(table);
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='nickname' name='nickname'></td></tr><tr><td>CA Number</td><td><input type='text' id='account' name='account'></td></tr>");
});
</script>
</head>
<body>
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
</body>
Veja o código abaixo:
HTML:
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'></table>
JS :
createFormElement("Nickname","nickname")
function createFormElement(labelText, id) {
$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}
Este faz o que você quer dinamicamente, ele só precisa do id e do labelText para fazê-lo funcionar, que na verdade devem ser as únicas variáveis dinâmicas, pois só eles vão mudar. O teu DOM a estrutura permanecerá sempre a mesma .
Além disso, quando utiliza o processo que mencionou no seu post, obtém apenas [object Object]. Isso é porque quando você chama createProviderFormFields, é uma chamada de função e, portanto, está retornando um objeto para você. Você não vai ver a caixa de texto como ele precisa ser adicionado . Para isso, você precisa remover o conteúdo individual do object, em seguida, construir o html a partir dele.
id s do rótulo e da entrada de acordo com as suas necessidades.
var obj = JSON.parse(msg);
var tableString ="<table id='tbla'>";
tableString +="<th><td>Name<td>City<td>Birthday</th>";
for (var i=0; i<obj.length; i++){
//alert(obj[i].name);
tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
}
tableString +="</table>";
alert(tableString);
$('#divb').html(tableString);
Aqui está o código para gg_stringformat
function gg_stringformat() {
var argcount = arguments.length,
string,
i;
if (!argcount) {
return "";
}
if (argcount === 1) {
return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;
}