We Keep Coding

Add columns to a new table row in JQuery

I have the following html:
<table id='myTable'>
<tbody>
<tr>
<td id=col1">12</td>
<td id=col2">55</td>
<td id=col3">142</td>
<td id=col4">7</td>
</tr>
</tbody>
</table>
I would like to use JQuery to append everything after column 3 (col3) to a new row. Ideally I would end up with something like this:
<table id='myTable'>
<tbody>
<tr>
<td id=col1">12</td>
<td id=col2">55</td>
<td id=col3">142</td>
</tr>
<tr>
<td id=col4">7</td>
</tr>
</tbody>
</table>
Any ideas how this could be achieved? I have tried a few things but haven't been able to get it working.

You could define a generic redistribution function, that takes as argument the desired number of columns, and which just fills up the rows with content from top to bottom, using that number of columns.
It could even be a jQuery plugin:
$.fn.redistribute = function(maxNumCols) {
if (maxNumCols < 1) return;
$(this).each(function () {
let cells = Array.from($("td", this));
let $tr = $("tr", this);
let rowCount = Math.ceil(cells.length / maxNumCols);
for (let i = 0; i < rowCount; i++) {
let $row = i >= $tr.length ? $("<tr>").appendTo(this) : $tr.eq(i);
$row.append(cells.splice(0, maxNumCols));
}
});
}
// I/O management
function alignTable() {
let cols = +$("input").val(); // Get desired number of columns
$("#myTable").redistribute(cols); // Apply to table
}
// Refresh whenever input changes
$("input").on("input", alignTable);
// Refresh on page load
alignTable();
table { border-collapse: collapse; border: 2px solid }
td { border: 1px solid; padding: 4px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Desired number of columns: <input type="number" size="3" value="4" min="1">
<table id='myTable'>
<tbody>
<tr>
<td>12</td>
<td>55</td>
<td>142</td>
<td>7</td>
<td>20</td>
<td>410</td>
<td>99</td>
</tr>
</tbody>
</table>
Here is a version with one extra statement that sets the colspan on the very last td element so it occupies the remaining columns in the last row:
$.fn.redistribute = function(maxNumCols) {
if (maxNumCols < 1) return;
$(this).each(function () {
let cells = Array.from($("td", this));
let $tr = $("tr", this);
let rowCount = Math.ceil(cells.length / maxNumCols);
for (let i = 0; i < rowCount; i++) {
let $row = i >= $tr.length ? $("<tr>").appendTo(this) : $tr.eq(i);
$row.append(cells.splice(0, maxNumCols));
}
$("td", this).last().attr("colspan", rowCount * maxNumCols - cells.length + 1);
});
}
// I/O management
function alignTable() {
let cols = +$("input").val(); // Get desired number of columns
$("#myTable").redistribute(cols); // Apply to table
}
// Refresh whenever input changes
$("input").on("input", alignTable);
// Refresh on page load
alignTable();
table { border-collapse: collapse; }
td { border: 1px solid; padding: 4px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Desired number of columns: <input type="number" size="3" value="4" min="1">
<table id='myTable'>
<tbody>
<tr>
<td>12</td>
<td>55</td>
<td>142</td>
<td>7</td>
<td>20</td>
<td>410</td>
<td>99</td>
</tr>
</tbody>
</table>

It sounds like you're still new to jQuery. To give you an idea how to solve your described problem, I have written a solution here. I hope it helps you.
// parameters for splitting
var splitIndex = 3,
splitClass = '.split-columns';
// start the splitting
splitColumnsIntoRows();
function splitColumnsIntoRows() {
var $tables = $(splitClass),
numberTables = $tables.length;
if (numberTables == 0) {
return;
}
for (var i = 0; i < numberTables; i++) {
iterateSplittingRows($($tables[i]).find('tr'));
}
}
function iterateSplittingRows($currentRows) {
var $currentRow,
numberRows = $currentRows.length;
if (numberRows == 0) {
return;
}
for (var i = 0; i < numberRows; i++) {
$currentRow = $($currentRows[i]);
iterateSplittingFields($currentRow, $currentRow.find('th, td'));
}
}
function iterateSplittingFields($currentRow, $currentFields) {
var $newRow,
newRows = [],
childrenLength,
numberFields = $currentFields.length;
if (numberFields == 0) {
return;
}
for (var i = 0; i < numberFields; i++) {
if (i < splitIndex) {
continue;
}
if (i % splitIndex == 0) {
$newRow = $('<tr></tr>');
}
$newRow.append($currentFields[i]);
if (i == numberFields - 1) {
childrenLength = $newRow.children().length;
// fill the row with empty fields if the length does not fit the splitIndex
for (var j = splitIndex; j > childrenLength; j--) {
$newRow.append($('<td></td>'));
}
}
if (
(i >= splitIndex && i % splitIndex == splitIndex - 1)
||
i == numberFields - 1
){
newRows.push($newRow);
}
}
$currentRow.after(newRows);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="split-columns">
<tbody>
<tr>
<td class="col_01">01</td>
<td class="col_02">02</td>
<td class="col_03">03</td>
<td class="col_04">04</td>
<td class="col_05">05</td>
<td class="col_06">06</td>
<td class="col_07">07</td>
<td class="col_08">08</td>
<td class="col_09">09</td>
</tr>
<tr>
<td class="col_10">10</td>
<td class="col_11">11</td>
<td class="col_12">12</td>
<td class="col_13">13</td>
<td class="col_14">14</td>
<td class="col_15">15</td>
<td class="col_16">16</td>
<td class="col_17">17</td>
</tr>
<tr>
<td class="col_19">19</td>
<td class="col_20">20</td>
<td class="col_21">21</td>
<td class="col_22">22</td>
<td class="col_23">23</td>
<td class="col_24">24</td>
<td class="col_25">25</td>
</tr>
</tbody>
</table>

add HyperLink to <td> in table with javascript

How can I add an hyperlink to a <td> in a dynamic table?
I need the 1st <td> to be an hyperlink to a url + cell value.
Table dynamic creation :
for (var i = 0; i < riskData.length; i++) {
$("#grdDemo3").append("<tr><td>" + riskData[i].r_id +
"</td><td>" + riskData[i].r_team + "</td></tr>");
}

Try this
for (var i = 0; i < riskData.length; i++) {
$("#grdDemo3").append("<tr><td><a href='https://a.com/"+riskData[i].r_id +"'>" +riskData[i].r_id + "</a></td><td>" + riskData[i].r_team + "</td></tr>");
}
OR
for (var i = 0; i < riskData.length; i++) {
$("#grdDemo3").append("<tr><td onclick='window.location.href=\"htts://a.com/"+riskData[i].r_id +"\"'>" +riskData[i].r_id + "</td><td>" + riskData[i].r_team + "</td></tr>");
}

You can always add an anchor tag to td element and make it look like a whole table cell.
table {
border-collapse: collapse;
}
td {
border: 1px solid #CCCCCC;
padding: 12px;
}
table tr td a {
display: block;
height: 100%;
width: 100%;
background: #F2F2F2;
text-decoration: none;
}
<table>
<tr>
<td>
<span>Some Text</span>
</td>
<td>some content
</td>
</tr>
<tr>
<td>
hello here </td>
<td>some content
</td>
</tr>
<tr>
<td>
<span>Some Text</span>
</td>
<td>some content
</td>
</tr>
<tr>
<td>
<span>Some Text</span>
</td>
<td>some content
</td>
</tr>
</table>

Printing json in html table

Here is my json APi -- >>> https://api.myjson.com/bins/p18mi
I have a table in which I have to print the Json data.
The problem is I want to print the Question data in major Question header and User_info array in thofUser column.
But its not working as expected. I am not able to arrange the table data properly so that all the user details must come User column and sub column. Same for question.
The output i am getting is this is image
$(function() {
var people = [];
$.getJSON('https://api.myjson.com/bins/p18mi', function(data) {
$.each(data.ct_info, function(i, f) {
var tblRow = " <tr>" + `<td id=${f.id}>` + `${f.id}` + "</td>" +
"<td>" + f.name + "</td>";
$(tblRow).appendTo("#userdata tbody");
var users = []
var question = []
f.Qid_info.forEach((x) => {
x.user_info.forEach((y) => {
//avoid duplicates
var foundUser = users.find((user) => {
return user.id === y.id
})
if (!foundUser) {
users.push(y)
}
})
})
f.Qid_info.forEach((x) => {
var foundQuestion = question.find((questions) => {
return questions.id === x.id
})
if (!foundQuestion) {
question.push(x)
}
})
$.each(question, function(i, question) {
var questionRow = `<td id=${question.id}>` + `${question.id}` +
"</td>" + "<td>" + question.isActive + "</td><td>" + question.iscomplex + "</td>" +
"<td>" + question.isbreakdown + "</td>"
$(questionRow).appendTo("#userdata tbody");
})
$.each(users, function(i, user) {
var userRow = `<td id=${user.id}>` + `${user.id}` +
"</td>" + "<td>" + user.name + "</td><td>" + user.data + "</td>" +
"<td>" + user.updatedAt + "</td>"
$(userRow).appendTo("#userdata tbody");
})
});
});
});
#user {
overflow-x: auto;
white-space: nowrap;
}
th,
td {
font-weight: normal;
padding: 5px;
text-align: center;
width: 120px;
vertical-align: top;
}
th {
background: #00B0F0;
}
tr+tr th,
tbody th {
background: #DAEEF3;
}
tr+tr,
tbody {
text-align: left
}
table,
th,
td {
border: solid 1px;
border-collapse: collapse;
table-layout: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
<tr>
<th colspan="2" id="ct">CT INFO</th>
<th colspan="4" id="que">Question</th>
<th colspan="4" id="user">User Info</th>
</tr>
<tr>
<th>CT ID</th>
<th>CT</th>
<th>Id</th>
<th>isActive</th>
<th>is Complex</th>
<th>is Breakdown</th>
<th>ID</th>
<th>NAME</th>
<th>Data</th>
<th>updatedAt</th>
</tr>
<tbody>
</tbody>
</table>

Start by using the template literal correctly and then realise you cannot append some unfinished row.
Also you need a thead, or the browser will insert an extra tbody
You need to add a colspanned cell for ct for each question and each user and add a colspanned cell for each question to the user.
It could be done with rowspan but that is up to you now.
Lastly your keys are "is complex" and "is breakdown"
$(function() {
var people = [];
var ctCells = [], questionCells = [], userCells = [];
var $tBody = $("#userdata tbody");
$.getJSON('https://api.myjson.com/bins/p18mi', function(data) {
$.each(data.ct_info, function(i, f) {
ctCells.push(`<td id=${f.id}>${f.id}</td><td>${f.name}</td>`);
var users = []
var question = []
f.Qid_info.forEach((x) => {
x.user_info.forEach((y) => {
//avoid duplicates
var foundUser = users.find((user) => {
return user.id === y.id
})
if (!foundUser) {
users.push(y)
}
})
})
f.Qid_info.forEach((x) => {
var foundQuestion = question.find((questions) => {
return questions.id === x.id
})
if (!foundQuestion) {
question.push(x)
}
})
$.each(question, function(i, question) {
ctCells.push(`<td colspan="2"> </td>`)
questionCells.push(`<td id=${question.id}>${question.id}</td><td>${question.isActive}</td><td>${question["is complex"]}</td><td>${question["is breakdown"]}</td>`);
})
$.each(users, function(i, user) {
ctCells.push(`<td colspan="2"> </td>`)
questionCells.push(`<td colspan="4"> </td>`)
userCells.push(`<td id=${user.id}>${user.id}</td><td>${user.name}</td><td>${user.data}</td><td>${user.updatedAt}</td>`);
})
});
$.each(userCells,function(i) {
$tBody.append(`<tr>${ctCells[i]}${questionCells[i]}${userCells[i]}</tr>`)
})
});
});
#user {
overflow-x: auto;
white-space: nowrap;
}
th,
td {
font-weight: normal;
padding: 5px;
text-align: center;
width: 120px;
vertical-align: top;
}
th {
background: #00B0F0;
}
tr+tr th,
tbody th {
background: #DAEEF3;
}
tr+tr,
tbody {
text-align: left
}
table,
th,
td {
border: solid 1px;
border-collapse: collapse;
table-layout: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
<thead>
<tr>
<th colspan="2" id="ct">CT INFO</th>
<th colspan="4" id="que">Question</th>
<th colspan="4" id="user">User Info</th>
</tr>
<tr>
<th>CT ID</th>
<th>CT</th>
<th>Id</th>
<th>isActive</th>
<th>is Complex</th>
<th>is Breakdown</th>
<th>ID</th>
<th>NAME</th>
<th>Data</th>
<th>updatedAt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

A general idea is to decouple the logic from the printing.
In that case,
parse the json as an array (a matrix for that matter)
then print your array.
Advantages are amongst:
you can test your "extracting"
you can also chose to display differently as done below
To parse the json
every user is a row
and in front of some of them, prepend the question, and eventually the ct_info (or blanks otherwise)
To print the array
either print all tds, and apply css afterwards
You can use td:empty{border:0;}. See that SO link
Or brutally merge the empty tds in front of the row as inline colspan
$(function() {
var people = [];
function myJsonTable(data){
function pushFront(fields){
return function(x,i){
if(i==0) return (x.unshift(...fields),x);
return (x.unshift(...fields.map(_=>'')),x);
}
}
return data.ct_info.reduce((rows, ct_info,i)=>{
let questionUsers = ct_info.Qid_info.reduce((acc, question)=>{
let users = question.user_info.map(({id, name, data, updatedAt})=>{
return [id, name, data.join(','), updatedAt]
});
//for each user
//[user, user, user]
//consider its transpose
//[[...user]
// [...user]
// [...user]
// ]
// and prepend the question on first column
// you obviously have to spread everything, this is just for illustration purpose
// [[question, user]
// [[] , user]
// [[] , user]
let q = [question.id, question.isActive, question['is complexe'], question['is breakdown']]
return acc.concat(users.map(pushFront(q)));
},[]);
//do the same for each info
// [[info1, question, user]
// [[], [] , user]
// [[], question, user]
// [[], [] , user]
// [info2, question, user]
// [[], [] , user]
// ]
return rows.concat(questionUsers.map(pushFront([ct_info.id, ct_info.name])))
},[]);
}
$.getJSON('https://api.myjson.com/bins/p18mi', function(data) {
let table = myJsonTable(data);
let dom = table.map(row=>'<tr>'+row.map(cell=>`<td>${cell}</td>`).join('')+'</tr>');
$('table:eq(0) tbody').append(dom);
let dom1 = table.map(row=>{
let idx = row.findIndex(cell=>cell!='');
let tds = row.slice(idx).map(cell=>`<td>${cell}</td>`).join('')
let colspan = idx>0? `<td colspan="${idx}"></colspan>`:'';
return `<tr>${colspan}</td>${tds}</tr>`;
});
$('table:eq(1) tbody').append(dom1);
});
});
#user {
overflow-x: auto;
white-space: nowrap;
}
th,
td {
font-weight: normal;
padding: 5px;
text-align: center;
width: 120px;
vertical-align: top;
}
th {
background: #00B0F0;
}
tr+tr th,
tbody th {
background: #DAEEF3;
}
tr+tr,
tbody {
text-align: left
}
table,
th,
td {
border: solid 1px;
table-layout: fixed;
}
/* --------------------- */
table{
border-collapse: collapse;
/*empty-cells:hide; cannot use if border-collapse!=separate, setting separate with border-spacing:0 makes ugly borders*/
}
/*https://stackoverflow.com/questions/18758373/why-do-the-css-property-border-collapse-and-empty-cells-conflict*/
td:empty{
border:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
css
<table id='userdata'>
<thead>
<tr>
<th colspan="2" id="ct">CT INFO</th>
<th colspan="4" id="que">Question</th>
<th colspan="4" id="user">User Info</th>
</tr>
<tr>
<th>CT ID</th>
<th>CT</th>
<th>Id</th>
<th>isActive</th>
<th>is Complex</th>
<th>is Breakdown</th>
<th>ID</th>
<th>NAME</th>
<th>Data</th>
<th>updatedAt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr/>
inline colspan
<table id='userdata'>
<thead>
<tr>
<th colspan="2" id="ct">CT INFO</th>
<th colspan="4" id="que">Question</th>
<th colspan="4" id="user">User Info</th>
</tr>
<tr>
<th>CT ID</th>
<th>CT</th>
<th>Id</th>
<th>isActive</th>
<th>is Complex</th>
<th>is Breakdown</th>
<th>ID</th>
<th>NAME</th>
<th>Data</th>
<th>updatedAt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Cannot read property 'childNodes' checkbox to get value from same row

Below code should get me the value of the column next to the checked box in the table, but, once the button is clicked, I am getting:
Cannot read property childNodes of null
Note: database from firebase which where the values from the table come from
Table image :
rootRefReAgents.on("child_added", snap => {
var AgentName = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentName + "</td><td><INPUT TYPE=\"Checkbox\"> </Input></td></tr>");
});
}
function ActionData(){
let agents = [];
let table = document.getElementById("table_body_Test");
let childNodes = Array.from(table.childNodes);
// let childNodes = table.childNodes;
for (let child of childNodes.values()) {
console.log(`child: ${child}`);
if (child.constructor.name !== "HTMLTableRowElement") {
continue;
}
let agent = child.childNodes.item(1).innerHTML;
console.log(`agent: ${agent}`);
let checkbox = child.childNodes.item(3).childNodes.item(1);
console.log(`checkbox: ${checkbox}`);
console.log(checkbox.checked);
if (checkbox.checked) {
agents.push(agent);
}
}
console.log(`agents: ${agents}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
<button id="submitBtn" onclick="ActionData()">Next</button>

ES6 brought new methods that simplify the code and its reading
const tableBody = document.querySelector('#testTable tbody' );
document.querySelector('#submitBtn').onclick=()=>
{
let agents = [];
console.clear();
for (let rowX of tableBody.rows )
{
let
agent = rowX.cells[0].textContent,
checkbox = rowX.cells[1].querySelector('input[type=checkbox]')
;
console.log( 'agent:', agent, 'checked:', checkbox.checked);
if (checkbox.checked) { agents.push(agent); }
}
console.log( 'agents (array):', agents.join(' / '));
}
/// bonus info :
/*
rootRefReAgents.on("child_added", snap=>{
let
newRow = tableBody.insertRow(-1);
newRow.insertCell(0).textContent = snap.child("Name").val();
newRow.insertCell(1).innerHTML = '<input type="Checkbox">';
});
*/
#testTable { margin: auto; border-collapse: collapse }
#testTable thead tr {
color: #D2002E;
background: #FFCC01;
height:32px;
font-weight: bold;
}
#testTable tr:nth-child(even) {background-color: lightgrey }
#testTable td { border:1px solid grey; padding: 0 20px; }
#testTable td:nth-child(2) { text-align: center }
<table id="testTable">
<thead>
<tr> <td>Agents</td> <td>Select</td> </tr>
</thead>
<tbody>
<tr> <td>AMC</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>Mygulfex</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>topStar</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>WMC</td> <td> <input type="checkbox" > </td> </tr>
</tbody>
</table>
<button id="submitBtn" >see Selects in console</button>

Javascript battleship game hit detection not working

I'm trying to write code to detect if a ship has been hit or not. I have 3 ships on the board and each takes up 3 cells. Using js I placed the 3 ships on the board. And when I run the fire method, only the last two ships show they've been hit, but the first ship at location 00,01,02 doesn't indicate that it's been hit, even once. Where did I go wrong?
var view = {
showMessage: function(msg) {
var message = document.getElementById('message');
message.innerHTML = msg;
},
showHit: function(location) {
var cell = document.getElementById(location);
cell.setAttribute('class', 'hit');
},
showMiss: function(location) {
var cell = document.getElementById(location);
cell.setAttribute('class', 'miss');
}
}
var model = {
boardSize: 7,
numShips: 3,
shipsSunk: 3,
ships: [{
location: [00, 01, 02],
hits: ['', '', '']
},
{
location: [10, 11, 12],
hits: ['', '', '']
},
{
location: [20, 21, 22],
hits: ['', '', '']
}
],
fire: function(guess) {
for (var i = 0; i < this.numShips; i++) {
var ship = this.ships[i];
var index = ship.location.indexOf(guess);
if (index >= 0) {
ship.hits[index] = 'hit';
view.showHit(guess);
}
}
}
};
model.fire(10);
model.fire(11);
model.fire(12);
model.fire(20);
model.fire(21);
model.fire(22);
/*
model.fire(00);
model.fire(01);
model.fire(02); */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: grey;
}
#message {
color: green;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
}
#board {
background: url('board.jpg') no-repeat;
width: 863px;
height: 1024px;
margin: auto;
position: relative;
}
table {
position: absolute;
left: 173px;
top: 98px;
}
td {
height: 94px;
width: 94px;
}
form input {
position: absolute;
right: 0px;
bottom: 0px;
background-color: green;
}
.hit {
background: url('ship.png') no-repeat center center;
}
.miss {
background: url('miss.png') no-repeat center center;
}
<div id='board'>
<div id='message'></div>
<table>
<tr>
<td id='00'></td>
<td id='01'></td>
<td id='02'></td>
<td id='03'></td>
<td id='04'></td>
<td id='05'></td>
<td id='06'></td>
</tr>
<tr>
<td id='10'></td>
<td id='11'></td>
<td id='12'></td>
<td id='13'></td>
<td id='14'></td>
<td id='15'></td>
<td id='16'></td>
</tr>
<tr>
<td id='20'></td>
<td id='21'></td>
<td id='22'></td>
<td id='23'></td>
<td id='24'></td>
<td id='25'></td>
<td id='26'></td>
</tr>
<tr>
<td id='30'></td>
<td id='31'></td>
<td id='32'></td>
<td id='33'></td>
<td id='34'></td>
<td id='35'></td>
<td id='36'></td>
</tr>
<tr>
<td id='40'></td>
<td id='41'></td>
<td id='42'></td>
<td id='43'></td>
<td id='44'></td>
<td id='45'></td>
<td id='46'></td>
</tr>
<tr>
<td id='50'></td>
<td id='51'></td>
<td id='52'></td>
<td id='53'></td>
<td id='54'></td>
<td id='55'></td>
<td id='56'></td>
</tr>
<tr>
<td id='60'></td>
<td id='61'></td>
<td id='62'></td>
<td id='63'></td>
<td id='64'></td>
<td id='65'></td>
<td id='66'></td>
</tr>
</table>
<form action='#' method='get'>
<input type='text' id='guessInput' placeholder='enter location: A0' />
<input type='button' name='submit' value='Fire!' name='fire' />
</form>
</div>

Your coordinates 00, 01, and 02 are interpreted as ints and are therefore resolved to 0, 1, and 2, because it is assumed that the leading zero is not needed for an int value. You can fix this by using strings to represent and compare the coordinates. Instead of model.fire(00), you will need model.fire("00"). Then to compare the input coordinates, you will need to compare guess.charAt(0) and guess.charAt(1) to determine if that coordinate is a hit.