I am making a checklist, I have the categories and each category has its intervention, you have to check according to what corresponds to the problem that is that for example.
CheckList.vue
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="si"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="no"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="bueno"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="regular"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="malo"
v-model="checkEstado"
/>
<label></label>
</td>
<td>
<textarea
name="observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
When selecting the first radio there is no problem, the problem is when selecting the second radio of the second row, intervention 2, the first one is deselected.
https://codepen.io/lucascardemil/pen/GRMejWK
and how can i get that data
The radios' names are the same so each rows' radio whose name is existe will action like radio group,so only one is selected.
In other words, you need to assign different names for each rows' radio button group.And the model-binding you also need to be changed to save it correctly corresponding to each intervencion if necessary.
Below is my sample code in vuejs 2 which you could refer to.
<template>
<div>
<table class="table table-bordered" style="width: 100%;">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="si"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="no"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="bueno"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="regular"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="malo"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td>
<textarea
:name="'observacion' + intervencion.id"
v-model="intervencion.observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
<pre>
{{JSON.stringify(formatchecklists, null, 2)}}
</pre>
</div>
</template>
<script>
export default {
data() {
return {
formatchecklists :[{
"categoria":"category1",
"intervenciones":[{
"id":1,
"intervencion":"intervencion1",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":2,
"intervencion":"intervencion2",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
},
{
"categoria":"category2",
"intervenciones":[{
"id":3,
"intervencion":"intervencion3",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":4,
"intervencion":"intervencion4",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
}]
};
}
};
</script>
Related
I just wanted to add button that will make a new table under the first one (max. 10 times), but the JavaScript code that I implemented don't do that as I want. Below is my HTML & JSS.
function addField(n)
{
var tr = n.parentNode.parentNode.cloneNode(true);
document.getElementById('tbl').appendChild(tr);
}
<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>
(https://i.imgur.com/WxV060Y.mp4)
You need to append the copied table to the document body, not back to the table:
function addField(n)
{
var tblClone = n.previousElementSibling.cloneNode(true);
document.body.appendChild(tblClone );
}
<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>
var count = 1;
function addField(n)
{
if(count<=5){
var table = n.previousElementSibling.children[0].cloneNode(true);
document.getElementById("table-group").appendChild(table);
count++;
}
if(count===5){
document.getElementById('addBtn').style.display='none';
}
}
<div id="table-group">
<table class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" id="addBtn" class="btn btn-primary" value="+" onclick="addField(this);"/>
I want to update all table rows in a table i have given id to tbody i.e. cartupdate but when i click the update button the rows are not updated. Actually all rows are coming from ajax request but to explain my problem i have taken static row in javascript variable. Please help to sort out my issue.
$(document).on('click', '.update_btn', function(e) {
var test = "<tr><td class='action'><a href='#' id='c9f' class='remove_car'><i class='fa fa-times' aria-hidden='true'></i></a></td><td class='cart_product_desc'> <h5>Product 2</h5> </td><td><span> S </span></td><td class='price'><span>$334</span></td><td class='qty'> <div class='quantity> <input type='number' class='qty-text' id='qty' step='1' min='1' max='1' name='quantity' value=3 disabled> </div> </td> <td class='total_price'><span>1,002</span></td> </tr></tbody><tfoot> <tr> <td><strong>Total</strong></td> <td><strong>Rs 1500</strong></td></tr>";
$("#cartupdate").empty();
$("#cartupdate").html(test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody id="cartupdate">
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />
The problem is because the HTML you're injecting in to #cartupdate contains half of a tbody and half of a tfoot. This is invalid. You have to inject complete elements only. As such your tablelayout is broken.
To fix this amend the HTML you inject to include <tbody> tag at the start and a </tfoot> element at the end. Then you need to remove the existing tbody and tfoot before you append the new HTML to the table. Try this:
$(document).on('click', '.update_btn', function(e) {
var html = '<tbody><tr><td class="action"><i class="fa fa-times" aria-hidden="true"></i></td><td class="cart_product_desc"><h5>Product 2</h5></td><td><span>S </span></td><td class="price"><span>$334</span></td><td class="qty"><div class="quantity"><input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value="3" disabled></div></td><td class="total_price"><span>1,002</span></td></tr></tbody><tfoot><tr><td><strong>Total</strong></td><td><strong>Rs 1500</strong></td></tr>';
var $table = $('table');
$table.find('tbody, tfoot').remove();
$table.append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />
Using jQuery, how can I do the following when clicking the edit icon in the third column:
Change the text in the adjacent second column to an input box
Change the icon class in the third column to a save button
Change the original text in the second column to what was entered into the input box
(Sorry if that's confusing and/or a lot to ask!)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<form>
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody align="left">
<tr>
<th scope="row" id="modalLinkName">Link 1</td>
<td>
<a id="modalLinkURL">https://www.link1.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 2</td>
<td>
<a id="modalLinkURL">https://www.link2.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 3</td>
<td>
<a id="modalLinkURL">https://www.link3.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
First there are a few issues to fix in your HTML:
id attribute values must be unique in HTML. Use class names instead for where you currently have duplicates.
you have <th> opening tags that are closed with </td>
With those changes, you could use this click handler:
$(".modalEditLink").click(function () {
if ($(this).find(".fa-pen").length) { // edit operation:
var $a = $(this).closest("tr").find(".modalLinkURL");
var $inp = $("<input>").addClass("editURL").val($a.text());
$a.replaceWith($inp);
$inp.focus();
$(this).find(".fas").removeClass("fa-pen").addClass("fa-save");
} else { // save operation:
var $inp = $(this).closest("tr").find(".editURL");
var $a = $("<a>").addClass("modalLinkURL").text($inp.val());
$inp.replaceWith($a);
$(this).find(".fas").removeClass("fa-save").addClass("fa-pen");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td scope="row" class="modalLinkName">Link 1</td>
<td>
<a class="modalLinkURL">https://www.link1.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 2</td>
<td>
<a class="modalLinkURL">https://www.link2.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 3</td>
<td>
<a class="modalLinkURL">https://www.link3.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!
You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
I've got a table with different td's with the same ID, this is my table, in a foreach loop:
<td class="AMLLeft" style="display:inline-block; !important">ID:
<p class="important">${item.id}</p>
</td>
<td align="right" nowrap="true" class="AMLRight">Transaction sum: ${item.sum} ${item.currencyCode}</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML ID: ${item.id}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML Category: ${item.amlClientCategory}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Close" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Client ID: ${item.clientId}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Set Investigate" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Status: ${item.status}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Comment: ${item.comment}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
I want to be able to find the value of the 2nd rows: <p class="important">${item.id}</p>, This is the code I've tried so far, which didn't work:
$(".commentButton").on('click', function () {
var id = $(this).find('p.important').value();
alert("id is:" + id);
});
Any help with this is very much appreciated!
$(this).closest('tr').siblings().find('p.important').text();
try this
Using the button select the tr use siblings() to get the tr of the p with .important. after getting the tr use .find() to search for the p.important and finally using .text() get the value.
$(".commentButton").on('click', function () {
var id = $(document).find('p.important').html();
alert("id is:" + id);
});
this is your button, which does not contain the item your searching.
.html gets the value between the html tags