Добавление динамического столбца с помощью jquery
Привет друг, как добавить столбец динамически с помощью jquery.
Привет Друг,
Вот быстрое решение того, что, как я понял, является вашей проблемой. Возможно, вам придется сделать много переделок этого метода. Но все очень просто
$(document).ready(function(){
// Assuming you have an array that you have generated somehow dynamically which will contain all the data of a single column in each row.
// or a 2D array with data for each column in internal array in each row (You may have understood me)
var col_array = new Array("Hello","World","!!!");
// Now you must have given an ID to the table on which you want to perform the operation. Let up say #mytable. So,
$("#mytable tr).each(function(index){
$(this).append("<td>" + col_array[index] + "</td>");
});
});
Проверьте приведенные ниже ссылки для получения дополнительной информации.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style>
table{
width:500px;
height:500px;
}
table td{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
</style>
<script>
function createTable(){
mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('<td></td>').text("text1").appendTo(row);
}
}
console.log("TTTTT:"+mytable.html());
mytable.appendTo("#box");
}
</script>
Row Count:<input type="text" id="rowcount" />
Column Count:<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box">
</div>