Develop Reference

how to make radio button independent of others in vuejs

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>

How to verify whether a value is from a particular table in HTML

Below is code snippet of my HTML page:
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Aniruddh </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Ajay <td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Vijay </td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group1 </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group2 <td>
</tr>
</table>
</div>
I am developing a Web application where I send messages to users by the push of a button. I have two HTML tables on my page namely Contacts with "id"="cntList" and Groups "id"="grpList"; where both tables will have names and a checkbox corresponding to them.
When I click on some contact in Contacts table or a group in the Group table, my code should understand whether it is from a Contacts table or it is a Group table and call the function to send the message accordingly.
I am getting how to start with JQuery in this?

You can retrieve the id of the clicked parent table element within event handler by checking the .id property of this, or event.currentTarget using .closest() with table[id$=List] as selector passed, .attr() with "id" as parameter
var selector = "table[id$=List]";
$(selector + " :checkbox").click(function(event) {
console.log($(this).closest(selector).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Aniruddh</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Ajay
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Vijay</td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group2
<td>
</tr>
</table>
</div>

CSS for Table display in Android/iOS

I am trying to display the below table in an App.
I can't use List or Grid
The purpose of the below code is to allow a user to dynamically add, edit, delete the table data using javascript table.insertRow(table_len).outerHTML
<table id="data_table">
<tr>
<th>Wood</th>
<th>H(ft.)</th>
<th>Th(in.)</th>
<th>Qty.</th>
<th>Action</th>
</tr>
<tr id="row1">
<td id="name_row1">Sesa</td>
<td id="country_row1">12</td>
<td>
<input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row1">
<td><input type="text" id="width_txt">asd</td>
<td><input type="text" id="thick_txt">asd</td>
<td><input type="text" id="qty_txt">asd</td>
<td>
<button class="button icon ion-gear-a" id="edit_button1" value="Edit" onclick="edit_row('1')"></button>
<button class="button icon ion-android-done" id="save_button1" value="Save" class="save" onclick="save_row('1')"></button>
<button class="button icon ion-trash-a" value="Delete" class="delete" onclick="delete_row('1')"></button>
<!-- <input type="button" id="edit_button1" value="Edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">-->
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<!--<td class="col col-20"><input type="text" id="wood_name"></td>
<td class="col col-10"><input type="text" id="height_txt"></td>
<td class="col col-10"><input type="text" id="width_txt"></td>
<td class="col col-10"><input type="text" id="thick_txt"></td>
<td class="col col-10"><input type="text" id="qty_txt"></td> -->
<td><button class="button icon ion-android-add-circle" class="add" onclick="add_row();"></button></td>
</tr>
</table>

How to check if a table has any duplicated rows column in js?

I want to check if a table has any duplicated column in rows. If a table has, an alert to be displayed that without adding database of. Then I want to unplug duplicated data from the table. How can I do that? I'm waiting for your help!
This is my table has duplicated class A:
This is my table html code.
<table id="tblSeatInfo">
<thead>
<tr>
<td>
Class
</td>
<td>
Given Seat
</td>
<td>
Adult Buying Price
</td>
<td>
Adult Selling Price
</td>
<td>
Child Buying Price
</td>
<td>
Child Selling Price
</td>
<td>
Infant Buying Price
</td>
<td>
Infant Selling Price
</td>
</tr>
</thead>
<tbody>
<tr class="tr-notremove">
<td>
<input class="form-control" type="text" name="class" />
</td>
<td>
<input class="form-control seat" type="text" name="givenseat" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantprice" />
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-md btn-success btn-addnewseat">Add</button>
<button type="button" class="btn btn-md btn-warning btn-removenewseat">Remove</button>
</div>
</td>
</tr>
</tbody>
</table>

Try something like this
$('[name="class"]').on('input',function(){
var value = $(this).val();
$('[name="class"]').not(this).each(function(){
if($(this).val() == value) {
alert('duplicate content');
}
})
});
demo: https://jsfiddle.net/r3oq636w/1/

HTML/jQuery finding text in closest <p> tag

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