I want to be re-order the based on which field has been hidden, I set the hidden field zone zone_deleted to 1 when it it has been hidden to mark it as deleted.
function insertZone() {
var table = document.getElementById('zoneItems');
var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;
var rowcount = document.getElementById('zoneItems').rows.length;
if(rowcount == 0){
var x = table.insertRow(-1);
var head1 = x.insertCell(0);
head1.innerHTML = "Zone";
var head2 = x.insertCell(1);
head2.innerHTML = "Motor Reference Point";
var head3 = x.insertCell(2);
head3.innerHTML = " ";
}
for (var i=0; i < number; i++)
{
var x = table.insertRow(-1);
var a = x.insertCell(0);
//a.innerHTML = "<input type='hidden' name='zone_id' value='' /> ";
num = i+1;
var b = x.insertCell(1);
b.innerHTML = "<input type='text' name='zone_description[]' size='18' value=''/><input id='zone"+num+"' type='hidden' name='zone_deleted[]' value='0' />";
var c = x.insertCell(2);
c.innerHTML = "<button type='button' class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
}
//set the row ordering
count();
}
function removeZone(rows) {
var _row = rows.parentElement.parentElement;
_row.cells[1].getElementsByTagName('input')[1].value = '1';
document.getElementById('zoneItems').rows[_row.rowIndex].style.display = 'none';
count();
}
function count(){ //sets the row ordering
var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
for (var i = 0, row; row = tbody.rows[i]; i++) { //loop through rows
if(i != 0){//if not the first row
// var deleted = row.cells[1].getElementsByTagName('input')[1].value;
for (var j = 0, col; col = row.cells[j]; j++) {//loop through cols
if(j == 0){//insert into only the first td
col.innerHTML = "<span>" +i+ "</span><input type='hidden' name='zone_id' value='' />";
}
}
}
}
}
Use a different variable for the row number that's displayed than the one used to index the rows in the DOM.
function count() {
var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
var rownum = 1;
for (var i = 1, row; row = tbody.rows[i]; i++) { //loop through rows
var deleted = row.cells[1].getElementsByTagName('input')[1].value;
if (deleted != "1") {
row.cells[0].innerHTML = "<span>" +rownum+ "</span><input type='hidden' name='zone_id' value='' />";
rownum++;
}
}
}
FIDDLE
Related
This picture defines what I need
I want that the data I enter dynamically to be converted to table with each comma defining the column and the newline defining the new row.
Below is the code I have tried. Can I have a better approach to this problem?
<script>
function myFunction()
{
var x = document.getElementById("textarea").value.split(" ");
var customers = new Array();
customers.push(x[0]);
customers.push(x[1]);
customers.push(x[2]);
var table = document.createElement("TABLE");
table.border = "1";
//Get the count of columns.
var columnCount = customers[0].length;
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}
//Add the data rows.
for (var i = 1; i < customers.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
</script>
<html>
<head>
<title>Player Details</title>
</head>
<body align = "center">
<h3 align = "center"><b>Input CSV</b></h3>
<p align = "center"><textarea rows="10" cols="50" name = "csv" id = "textarea"></textarea></p><br>
<button type="button" id = "convert" onclick="myFunction()">Convert</button><br>
<br>
<div id = "team"></div>
</body>
</html>
You need to split the data first using newline (\n) and then using comma (,) character.
The table can be created as string and finally inserted to the correct div.
Refer the code below to get you started.
function myFunction() {
var tbl = "<table class='table table-responsive table-bordered table-striped'><tbody>"
var lines = document.getElementById("textarea").value.split("\n");
for (var i = 0; i < lines.length; i++) {
tbl = tbl + "<tr>"
var items = lines[i].split(",");
for (var j = 0; j < items.length; j++) {
tbl = tbl + "<td>" + items[j] + "</td>";
}
tbl = tbl + "</tr>";
}
tbl = tbl + "</tbody></table>";
var divTable = document.getElementById('team');
console.log(tbl);
divTable.innerHTML = tbl;
}
I've used bootstrap for css, you may want to use your own (or not).
Refer jsFiddle here.
This question can be a duplicate.
I need add 24 rows in a html table with 8 columns on click of button. I look for some examples, and I tried this (code below), but only row is add. Someone could help? Thanks for attention.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = 3;
for (var i = 0; i < 24; i++) {
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(i);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chbx";
var element2 = document.createElement("label");
if (i < 9) {
element2.innerHTML = "0" + i ;
}
else {
element2.innerHTML = i;
}
element2.name="lbl";
cell1.appendChild(element1);
cell1.appendChild(element2);
var cell2 = row.insertCell(i + 1);
cell2.innerHTML = "2";
var cell3 = row.insertCell(i + 2);
cell3.innerHTML = "3";
var cell4 = row.insertCell(i + 3);
cell4.innerHTML = "4";
var cell5 = row.insertCell(i + 4);
cell5.innerHTML = "5";
var cell6 = row.insertCell(i + 5);
cell6.innerHTML = "6";
var cell7 = row.insertCell(i + 6);
cell7.innerHTML = "7";
var cell8 = row.insertCell(i + 7);
cell8.innerHTML = "8";
rowCount++;
}
}
Check out this approach:
JS
var table = document.getElementById('table');
function addRows(table, rows, columns){
var row = '';
for (var i = 0; i < rows; i++){
row = '<tr>';
for(var j = 0; j < columns; j++){
row += '<td>' + j +'</td>'
}
row += '</tr>';
table.innerHTML += row
}
}
addRows(table, 24, 8);
HTML
<table id="table">
</table>
Check out this codepen.
I need to read the value of textbox which is inside the table.
Following is how I create table.
var theader = '<table border = "1" id = "MarksTable">\n';
var tbody = '';
for ( var i = 0; i < total_rows; i++) {
tbody += '<tr>';
for ( var j = 0; j < total_col; j++) {
tbody += '<td name=' + "cell" + i + j + '>';
if (i > 0) {
tbody += '<input type="text" value = "marks" name="inputcell1'+j + '">';
} else {
tbody += '<b>' + subjectList[j] + '</b>';
}
tbody += '</td>';
}
tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('wrapper').innerHTML = theader
+ tbody + tfooter ;
and below is my attempt to read text box value:
function readTableData(){
var marks = [];
var table = document.getElementById("MarksTable");
var column_count = table.rows[1].cells.length;
var row = table.rows[1];
if(column_count>0){
for(var index = 0; index < column_count;index++){
marks[index] = row.cells[index].innerHTML;
}
}
return marks;
}
Here, row.cells[index].innerHTML gives the output '<input type="text" value = "marks" name="inputcell10">.
Try this:
function readTableData(){
var marks = [];
var table = document.getElementById("MarksTable");
var column_count = table.rows[1].cells.length;
var row = table.rows[1];
if(column_count>0){
for(var index = 0; index < column_count;index++){
marks[index] = row.cells[index].getElementsByName('inputcell' + index)[0].value;
//Or marks[index] = document.getElementsByName('inputcell' + index)[0].value;
}
}
return marks;
}
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<div id="tableContainer">
</div>
<br>
<button onclick="myFunction()">Try it</button>
<button onclick="readTableData()"> Read it </button>
<script>
function myFunction() {
var tab = '<table id="MarksTable">';
var counter = 0;
for(i = 0; i< 4; i++){
tab = tab + '<tr><td rowspan = "4"> Dept1 </td><td> <input type="text" id="inputcell'+counter+'" value="'+i+'"/> </td></tr>';
counter++;
tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'" value="'+i+'"/> </td></tr>';
counter++;
tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'" value="'+i+'"/> </td></tr>';
counter++;
tab = tab+'<tr><td> <input type="text" id="inputcell'+counter+'" value="'+i+'"/> </td></tr>';
counter++;
}
tab = tab + '</table>';
document.getElementById("tableContainer").innerHTML = tab;
}
function readTableData(){
var val;
var table = document.getElementById("MarksTable");
var column_count = table.rows[1].cells.length;
var rowcount = table.rows.length;
alert(rowcount);
if(column_count>0){
for(var index = 0; index < rowcount;index++){
var row = table.rows[index];
val = document.getElementById("inputcell"+index);
alert(val.value);
//marks = row.cells[0].getElementsByName('inputcell').value;
//Or marks[index] = document.getElementsByName('inputcell' + index)[0].value;
}
}
alert(val);
}
</script>
</body>
</html>
I am dynamically generating table rows using javascript (no jquery involved). Each row has 3 cells zone number, input, and a delete button. The number of rows added uses a select box to if they select 3, 3 rows are added ect. What I want to happen is if they add 3 rows then add another 3. the rows will be will displayed as 1,2,3,4,5,6, Currently its 1,2,3,1,2,3. I also what to re-order the rows when a row is deleted.
Current code php file:
function display_Zones($focus, $field, $value, $view){
global $locale, $app_list_strings, $mod_strings;
$html = '';
if($view == 'EditView'){
$html .= '<script src="modules/dry_Zones/zone_items.js"></script>';
$html .= "<div style='padding-top: 10px; padding-bottom:10px;'>";
$html .= "<select id='zone' name='zone'>";
$html .= get_select_options_with_id($app_list_strings["zone_list"]);
$html .= "</select> ";
$html .= "<input type=\"button\" tabindex=\"116\" class=\"button\" value=\"addZone\" id=\"addZone\" onclick=\"insertZone()\" />";
$html .= "</div>";
$html .= "<table border='0' cellspacing='4' width='40%' id='zoneItems'>";
$html .= "<tr><td></td><td>Motor Reference Point</td><td></td></tr>";
$html .= "</table>";
return $html;
}
javascript file:
var num = 1;
function insertZone() {
var table = document.getElementById('zoneItems');
var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;
if(number != ''){
for (var i=0; i < number; i++)
{
var x = table.insertRow(-1);
var a = x.insertCell(0);
num = num+i;
a.innerHTML = "<span>Zone: "+num+"</span> ";
var b = x.insertCell(1);
b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";
var c = x.insertCell(2);
c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
}
}
}
function removeZone(rows) {
var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);
}
Probably not the most efficient, way, but I don't think you'll notice any problems unless you have thousands of rows. When you add/delete rows, you could just iterate through the first table cell of each row and update it based on the index.
Array.prototype.forEach.call(document.querySelectorAll('td:first-child'),
function (elem, idx) {
elem.innerHTML = idx + 1;
});
http://jsfiddle.net/ExplosionPIlls/2QxX6/
Ended up just doing it like this:
function insertZone() {
var table = document.getElementById('zoneItems');
var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;
if(number != ''){
for (var i=0; i < number; i++)
{
var x = table.insertRow(-1);
var a = x.insertCell(0);
num = i+1;
// a.innerHTML = "<span>Zone: "+num+"</span> ";
var b = x.insertCell(1);
b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";
var c = x.insertCell(2);
c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
}
count();
}
}
function removeZone(rows) {
var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);
count();
}
function count(){
var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
row_count = tbody.rows.length - 1;
for (var i = 0, row; row = tbody.rows[i]; i++) {
if(i != 0){
for (var j = 0, col; col = row.cells[j]; j++) {
if(j == 0){
col.innerHTML = "<span>Zone: "+i+"</span> ";
}
}
}
}
}
I'm trying to set a onclick event handler.
from some reason this works:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function init() {
var td = document.getElementById("td");
var table = document.createElement("table");
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "test";
cell.onclick = function () { alert(); };
td.appendChild(table);
}
</script>
</head>
<body id="td" onload="init()">
</body>
</html>
and when putting it in outside js file it doesn't work:
function buildChessBoard() {
var currentColor = white;
//var table = "<table>";
var table = document.createElement("table");
for (var i = 0; i < chessBoardsize / 8; i++) {
//table += "<tr>";
var row = table.insertRow(i);
for (var j = 0; j < 8; j++) {
//table += "<td class=" + currentColor + "Cell" + " id=" + (i * 8 + j) + " onclick=setCell(this)></td>";
var cell = row.insertCell(j);
cell.innerHTML = "test";
cell.onclick = function () { alert(); };
if (j != 7) {
if (currentColor == white)
currentColor = gray;
else
currentColor = white;
}
}
//table += "</tr>";
}
//table += "</table>";
//chessBoardDiv.innerHTML = table;
chessBoardDiv.appendChild(table);
}
any idea why ?