I m trying to get the value of a row id inside a modal called with Ajax.
I would like to get the row id (data-id) from the modal.
the JavaScript function "onRowClick" is working for the table in the main page but not for the one in the modal.
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modalit#0.1.6/dist/MODALit.css">
<script src="https://cdn.jsdelivr.net/npm/modalit#0.1.6/dist/MODALit.min.js"></script>
</head>
<body>
<table id="table1">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<hr />
<div style="color:green" id="row-value">-</div>
<hr />
<!-- Sets modal target -->
<button type="button" id="button" data-src="modal.html">Modal Open</button>
<script>
var modal = new MODALit({
el: '#button',
});
window.onload = onRowClick("table1", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table1"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
</script>
</body>
</html>
Ajax content (modal.html):
<table id="table2">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<script>
window.onload = onRowClick("table2", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table2"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
How can i get the data-id of the row inside the modal ?
Related
I am struggling with something that should be so simple.
I am trying to move a row from one html table to another, basically a table with selection options and input to another table with the final selections and values.
Image for UI
My Html code is as follow,
function GetIndex()
{
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
console.log("HERE " + id );
localStorage.setItem("ID", id);
};
};
currentRow.onclick = createClickHandler(currentRow);
AddNextTable();
}
}
function AddNextTable()
{
var ID= localStorage.getItem("ID");
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2");
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
var Counter= 0;
Counter++;
var InputSelect= "input" + ID;
console.log(InputSelect);
var NewText= document.getElementById(InputSelect).value;
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[id].cells[0].innerHTML;
cell2.innerHTML = table1.rows[id].cells[1].innerHTML;
cell3.innerHTML = table1.rows[id].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
cell3.innerHTML= "<input type='text' value="+ NewText+ ">"
var index = table1.rows[1].rowIndex;
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
function tab2_To_tab1()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab2");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table1.insertRow(table1.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
// add values to the cells
cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
// remove the transfered rows from the second table [table2]
var index = table2.rows[i+1].rowIndex;
table2.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Transfer Rows Between Two HTML Table</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left}
.tab-btn{margin: 50px;}
button{display:block;margin-bottom: 20px;}
tr{transition:all .25s ease-in-out}
tr:hover{background-color: #ddd;}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<table id="table1" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>
<input type="text" id="input1">
</td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Dean</td>
<td><input type="text" id="input2"></td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Fred</td>
<td><input type="text" id="input3"></td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
</table>
</div>
<div class="tab">
<table id="table2" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
My end goal will be for the user to enter a certain amount of an item in the first table, and have it display in the next. I am looping through something incorrectly somewhere.
I found it quite complicated about your code. Just why not giving it a param that describes which button/input called the function? It will be much easier and also this will no longer require the use of localStorage. Hope this solves your problem.
On the html:
<button onclick="GetIndex('input1')"></button>
On the js
function GetIndex(src) {
...
AddIndex(src);
...
}
function AddIndex(src) {
...
var ID = src;
...
}
function GetIndex(src)
{
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
console.log("HERE " + id );
localStorage.setItem("ID", id);
};
};
currentRow.onclick = createClickHandler(currentRow);
AddNextTable(src);
}
}
function AddNextTable(src)
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2");
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
var Counter= 0;
Counter++;
var InputSelect= src;
console.log(InputSelect);
var NewText= document.getElementById(InputSelect).value;
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[id].cells[0].innerHTML;
cell2.innerHTML = table1.rows[id].cells[1].innerHTML;
cell3.innerHTML = table1.rows[id].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
cell3.innerHTML= "<input type='text' value="+ NewText+ ">"
var index = table1.rows[1].rowIndex;
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
function tab2_To_tab1()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab2");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table1.insertRow(table1.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
// add values to the cells
cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
// remove the transfered rows from the second table [table2]
var index = table2.rows[i+1].rowIndex;
table2.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Transfer Rows Between Two HTML Table</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left}
.tab-btn{margin: 50px;}
button{display:block;margin-bottom: 20px;}
tr{transition:all .25s ease-in-out}
tr:hover{background-color: #ddd;}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<table id="table1" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>
<input type="text" id="input1">
</td>
<td>
<button onclick="GetIndex('input1')">Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Dean</td>
<td><input type="text" id="input2"></td>
<td>
<button onclick="GetIndex('input2')">Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Fred</td>
<td><input type="text" id="input3"></td>
<td>
<button onclick="GetIndex('input3')">Add</button>
</td>
</tr>
</table>
</div>
<div class="tab">
<table id="table2" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
I think you're overcomplicating.
You don't need localStorage, you don't need almost anything. Just a bit of JS .append() to move back and forth your rows. Than using CSS you can additionally pimp the desired items to show/hide or even the button text:
const moveTR = (ev) => {
const EL_tr = ev.currentTarget.closest("tr");
const sel = EL_tr.closest("table").id === "table1" ? "#table2" : "#table1";
document.querySelector(sel + " tbody").append(EL_tr);
};
document.querySelectorAll("table button")
.forEach(EL => EL.addEventListener("click", moveTR));
table {border-collapse: collapse;}
th, td {border: 1px solid #ddd; padding: 5px 10px;}
#table1 button::after {content: "Add"}
#table2 button::after {content: "\2715"}
<table id="table1">
<thead>
<tr><th>Code</th><th>Name</th><th>Amount</th><th>Action</th></tr>
</thead>
<tbody>
<tr>
<td>8</td><td>Fred</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
<tr>
<td>4</td><td>Dean</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
<tr>
<td>1</td><td>Mark</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr><th>Code</th><th>Name</th><th>Amount</th><th>Action</th></tr>
</thead>
<tbody>
</tbody>
</table>
I have an array and I just want to use it in my table.
This is my idea but i don't know how to use the array to be shown inside a td-tag:
<head>
<script type="text/javascript">
function list() {
var list = ['Tim','Tom','Tam']
}
</script>
</head>
<body>
<table>
<tr>
<td>Place 1: list[0]</td>
<td>Place 2: list[1]</td>
<td>Place 3: lsit[2]</td>
</tr>
</table>
</body>
The hole idea is to generate an array from a Python Script, which gets it from a xlsx file, and give it over to a HTML page.
Create an array, and for each element create an TD element.
var list = [0, 1, 2, 3, 4, 5],
pushTo = arr => {
arr.forEach((cur , i) => {
let tempElem = document.createElement("TD");
tempElem.innerHTML = `list[${i}]`;
tlist.appendChild(tempElem);
});
};
pushTo(list);
<table>
<tr id="tlist">
</tr>
</table>
Pure JS:
<html>
<head>
<script type="text/javascript">
var list = ['Tim', 'Tom', 'Tam'];
</script>
</head>
<body>
<table>
<tbody>
<tr>
</tr>
</tbody>
</table>
<script>
var tr = document.querySelectorAll('table > tbody > tr')[0];
for (var l in list) {
var index = parseInt(l) + 1;
var td = document.createElement('td');
td.innerHTML = 'Place ' + index + ': ' + list[l];
tr.appendChild(td);
}
</script>
</body>
</html>
AngularJS:
var angularApp = angular.module('angularApp', []);
angularApp.controller('angularCtrl', function ($scope) {
$scope.list = ['Tim', 'Tom', 'Tam'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularApp" ng-controller="angularCtrl">
<table>
<tbody>
<tr>
<td ng-repeat="l in list">Pace {{$index + 1}}: {{l}}</td>
</tr>
</tbody>
</table>
</div>
I have this simple chrome extension that allows the user to create a table however I can't bind the remove Button.
options.html
<body>
<!-- would be created as the user clicks on new Row -->
<table id="rows">
<tr id="row0">
<td>
<input id="textBox" type="text">
<button id="remove">Remove</button>
</td>
</tr>
</table>
<!-- used as template -->
<table hidden>
<tbody>
<tr id="rowTemplate">
<td>
<input id="textBox" type="text">
<button id="remove">Remove</button>
</td>
</tr>
</tbody>
</table>
<button id="newRow">new Row</button>
<script src="options.js"></script>
options.js
function Row() {
var rows = document.getElementById('rows');
this.node = document.getElementById('rowTemplate').cloneNode(true);
this.node.id = 'row' + (Row.next_id++);
this.node.row = this;
rows.appendChild(this.node);
this.node.hidden = false;
var row = this;
this.getElement('remove').onclick = function () {
row.node.parentNode.removeChild(row.node);
}
}
Row.next_id = 0;
Row.prototype.getElement = function (name) {
return document.querySelector('#' + this.node.id + ' .' + name);
}
window.onload = function() {
document.getElementById('newRow').onclick = function() {
new Row();
};
}
The problem lies in the querySelector because whenever I click on 'new Row', I get an error Uncaught TypeError: Cannot set property 'onclick' of null pointing to the getElement('remove').onclick which calls getElement() where the querySelector returns null.
I am attempting to populate a table from json data... I am getting an error message on inspect that states the $ is undefined and the resulting table is empty. Any thoughts are appreciated.
Here is the html:
<html manifest="trade.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="leaflet-0.7.3/leaflet.css" type="text/css" />
<script type="text/javascript" src="leaflet-0.7.3/leaflet.js" rel="javascript" ></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" rel="jquery" ></script>
<title>Top Trades</title>
</head>
<body style="margin: 0;padding: 0; display:none;">
<div id="deepbkg"></div>
<div id="fullscreen">
<audio autoplay><source src="audio/trade.wav" type="audio/wav"></audio>
<div id="system" class="mySlides" style="display: block;">
<table id="systems">
<thead>
<tr>
<th class="systems">
<h1>Top System Trades</h1>
</th>
<th>
<div>
<h2>Trade Value</h2>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="logo">
<img src="images/gamestop.png" style="width: 80%;" />
</div>
</div>
<div id="games" class="mySlides" style="display: none;">
<table id="games">
<thead>
<tr>
<th class="systems">
<h1>
Top Game Trades
</h1>
</th>
<th>
<div>
<h2>
PRO
</h2>
</div>
</th>
<th>
<div>
<h3>
Regular Value
</h3>
</div>
</th>
</tr>
</thead>
<tbody>
-->
</tbody>
</table>
</div>
<div id="electronics" class="mySlides" style="display: none;">
<table>
<thead>
<tr>
<th class="systems">
<h1>
Top Electronics Trades
</h1>
</th>
<th>
<div>
<h2>
Trade Value
</h2>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="cube">
<img src="images/cube.gif" style="width: 80%" />
</div>
<script src="js/divslide.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var genericAJAXRequest = function(jsonFeedURL,paramData,callbackSuccess,callbackFailure,renderFunc) {
var paramData = (paramData !== undefined) ? paramData:{};
$.ajax({
url: jsonFeedURL,
type: 'post',
dataType: 'json',
data: paramData,
})
.done(function(data) {
// On success do this
callbackSuccess(data,renderFunc);
})
.fail(function(e) {
// on failure do these things
console.log("error");
console.log(e);
callbackFailure(e);
});
}
// If we get a good feed do this
var goodFeed = function(data,callback) {
console.log("Loaded Feed!");
console.log(data);
callback(data)
}
var badFeed = function(data) {
console.log("Did not load feed - error!");
console.log(data);
}
var dispSystem = function(data) {
$("#system table h1").text("Top System Trades");
$("#system table h2").text("Trade Value");
console.log(data.TopSystemTrades[0].name);
var row = "";
var loop = 0;
var len = data.TopSystemTrades.length;
var rowClass = "cost";
for (loop = 0; loop < len; loop++) {
row += '<tr><td class="title">'+data.TopSystemTrades[loop].name+'';
row += ' <span>'+data.TopSystemTrades[loop].pf+'</span></td>';
row += '<td class="'+rowClass+'">$'+parseFloat(data.TopSystemTrades[loop].price).toFixed(2).toLocaleString()+'</td></tr>';
}
$("#system table tbody").html(row);
console.log(row);
$("body").fadeIn(1000);
}
var dispGames = function(data) {
var table = $("#games");
$("#games table h1").text("Top Game Trades");
$("#games table h2").text("PRO");
$("#games table h3").text("Regular Value");
var row = "";
var loop = 0;
var len = data.TopGameTrades.length;
for (loop = 0; loop < len; loop++) {
row += '<tr><td class="title">'+data.TopGameTrades[loop].name+'';
row += ' <span>'+data.TopGameTrades[loop].pf+'</span></td>';
row += '<td class="cost">$'+parseFloat(data.TopGameTrades[loop].reg).toFixed(2).toLocaleString()+'</td>';
row += '<td class="cost">$'+parseFloat(data.TopGameTrades[loop].pro).toFixed(2).toLocaleString()+'</td></tr>';
}
$("#games table tbody").html(row);
console.log(row);
$("body").fadeIn();
}
var dispElectronics = function(data) {
var table = $("#electronics");
$("#electronics table h1").text("Top Electronics Trades");
$("#electronics table h2").text("Trade Value");
var row = "";
var loop = 0;
var len = data.TopElectronicsTrades.length;
for (loop = 0; loop < len; loop++) {
row += '<tr><td class="title">'+data.TopElectronicsTrades[loop].name+'';
row += ' <span>'+data.TopElectronicsTrades[loop].pf+'</span></td>';
row += '<td class="cost">$'+parseFloat(data.TopElectronicsTrades[loop].price).toFixed(2).toLocaleString()+'</td></tr>';
}
$("#electronics table tbody").html(row);
console.log(row);
$("body").fadeIn();
}
// Define our urls for the 3 different feeds
var topSystemsFeedURL = "data/top_system_trades_gde.json";
var topGameFeedURL = "data/top_game_trades_gde.json";
var topElectronicsFeedURL = "data/top_electronics_trades_gde.json";
// Make three different calls to load the json data from the urls, and render them to the html
genericAJAXRequest(topSystemsFeedURL, null, goodFeed, badFeed, dispSystem);
genericAJAXRequest(topGameFeedURL, null, goodFeed, badFeed, dispGames);
genericAJAXRequest(topElectronicsFeedURL, null, goodFeed, badFeed, dispElectronics);
});
I've a multiple number of rows which is generated by a for condition, with 2 icons up and down. On click of up the selected row should move one step up, and on click of down the selected row should move one step down
<html>
<head>
<body>
<form name="myForm">
<table id="mainTable" border="1" width="100%">
<script>
document.write('<tr>')
document.write('<td>')
document.write('row1')
document.write('</td>')
document.write('</tr>')
document.write('<tr>')
document.write('<td>')
document.write('row2')
document.write('</td>')
document.write('</tr>')
document.write('</table>')
document.write('<table>')
document.write('<tr>')
document.write('<td>')
document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')>
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')>
document.write('</td>')
document.write('</tr>')
document.write('</table>')
</script>
</table>
</form>
</body>
</head>
</html>
<script>
var mainTable = document.getElementById("mainTable");
function getRowIndex(el)
{
while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
if( el )
alert(el.rowIndex);
return el.rowIndex;
}
function swapRowUp(chosenRow) {
if (chosenRow.rowIndex != 0) {
moveRow(chosenRow, chosenRow.rowIndex-1);
}
}
function swapRowDown(chosenRow) {
if (chosenRow.rowIndex != mainTable.rows.length-1) {
moveRow(chosenRow, chosenRow.rowIndex+1);
}
}
function moveRow(targetRow, newIndex) {
if (newIndex > targetRow.rowIndex) {
newIndex++;
}
var mainTable = document.getElementById('mainTable');
var theCopiedRow = mainTable.insertRow(newIndex);
for (var i=0; i<targetRow.cells.length; i++) {
var oldCell = targetRow.cells[i];
var newCell = document.createElement("TD");
newCell.innerHTML = oldCell.innerHTML;
theCopiedRow.appendChild(newCell);
copyChildNodeValues(targetRow.cells[i], newCell);
}
//delete the old row
mainTable.deleteRow(targetRow.rowIndex);
}
function copyChildNodeValues(sourceNode, targetNode) {
for (var i=0; i < sourceNode.childNodes.length; i++) {
try{
targetNode.childNodes[i].value = sourceNode.childNodes[i].value;
}
catch(e){
}
}
}
</script>
i'm unable to perform the swap operation, i get cellIndex as null
You can use some sensible JavaScript
up.addEventListener("click", function moveRowUp() {
var row = this.parentNode.parentNode,
sibling = row.previousElementSibling,
parent = row.parentNode;
parent.insertBefore(row, sibling);
});
for some sensible HTML
<table>
<tbody>
<tr>
<td> 1 </td>
<td> filler </td>
</tr>
<tr>
<td> 2 </td>
<td> <button id="up">up</button> </td>
</tr>
</tbody>
</table>
Live Example