I need to create textfield dynamically when I click checkbox in table. In table I have around 500 data. Each data has check box and user can search and select parameters. As below image, If user click Testing 1 checkbox from table, Same Testing1 value should present in Parameter name text field.
If the user selects Testing 2 checkbox, dynamically Textfield needs be added and Testing 2 value should be present in created textfield. If user uncheck checkbox, textfield has to be removed from table. I have attached snapshot for reference.
Below code for TextField which resides in table.
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
You can do it like this:
$("#paramTable input[type='checkbox']").on("click", function() {
if ($(this).is(":checked")) {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
let newrow = $("<tr>");
let newcell = $("<td>");
let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
newcell.append(newinput);
newrow.append(newcell);
let newcells = $("<td><input type='text' class='parameterDscription' name='parameter_description'></td><td><input type='text' class='expectedValue' name='expected_value'></td>")
newrow.append(newcells);
$("tbody.parameter_table").append(newrow);
} else {
let name = $(this).parent("td").next("td").text();
let newname = name.replace(" ", "_");
$("#addParamTable").find("#" + newname).closest("tr").remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramTable">
<tr>
<td><input type="checkbox"/></td>
<td>Testing 1</td>
<td>1, 4, 6, 5, 9</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Testing 2</td>
<td>1, 4, 3, 5</td>
</tr>
</table>
<div class="tab-content">
<div id="protocol" class="tab-pane fade in active">
<div class="span3 border-0" style="overflow: scroll">
<table id="addParamTable" class="table table-bordered">
<thead>
<tr class="info">
<th>Parameter Name</th>
<th>Data Type</th>
<th>Expected Set Value</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr>
<td>
<input type="text" id="parameterName" class="parameterName" name="parameter_name">
</td>
<td>
<input type="text" class="parameterDscription" name="parameter_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
Related
I have a Bootstrap table in the following format
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
</div>
I would like to get the ids of the checkboxes as they are being checked using d3. I've tried the following but it doesn't seem to work. What would be the best way to get the checked ids stored in an array using d3?
var checked = []
var boxes = d3.selectAll("input.jmolInline:checked");
boxes.each(function() {
checked.push(this.id)
});
console.log(checked)
use this code to get the job done
var inputs = d3.selectAll('input[type="checkbox"]')._groups[0];
document.getElementById('submit').addEventListener('click', function() {
var checked = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked.push(inputs[i].id);
}
}
document.getElementById('result').innerHTML = 'Array of ids selected ' + checked;
console.log(checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
<button id="submit">get Id</button>
<div id="result"></div>
</div>
I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.
Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>
Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO
Is there any way I can get the value of each cell when I click a particular row of a bootstrap table. I want to access the value of all the cells of that row in some other function. Currently my rowClick event passes the index of row clicked. Here is my table
<Table className='flags-table' id="flags-table" responsive hover>
<thead>
<tr>
<th></th>
<th> Time In</th>
<th> Time Out</th>
<th> Type</th>
<th> Category</th>
</tr>
</thead>
<tbody>
{
this.props.tag_fetch_reducer.tags.map((x, i) => (
<tr className={i === this.props.marker_reached_reducer.index ? 'selected' : ''} key={i} onClick={this.handleRowClick.bind(this, i)}>
<td>
<div className='red-box'></div>
</td>
<td> {this.secondsToHms(x.time)} </td>
<td> {this.secondsToHms(x.stopTime)} </td>
<td> {x.tagname} </td>
<td> {x.category}</td>
</tr>
))
}
</tbody>
</Table>
A method I've used is that I set data attributes for each cell on the row itself. What this does, is it allows you to access the values easily. You simply wire up the click event for the row using javascript/jQuery (my example uses jQuery):
(function(document, window, $) {
$('.flags-table tbody tr').on('click', function() {
var time = $(this).data('time');
var stopTime = $(this).data('stop-time');
var tagName = $(this).data('tag-name');
var category = $(this).data('category');
var key = $(this).data('key');
alert('Values: \r\n' +
'Time: ' + time + '\r\n' +
'Stop: ' + stopTime + '\r\n' +
'Tag: ' + tagName + '\r\n' +
'Category: ' + category + '\r\n' +
'Key: ' + key + '\r\n');
});
})(document, window, jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="flags-table" id="flags-table" responsive hover>
<thead>
<tr>
<th></th>
<th>Time In</th>
<th>Time Out</th>
<th>Type</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr data-time="08:00" data-stop-time="13:00" data-tag-name="test1" data-category="cat1" data-key="34098" class="low">
<td>
<div className="red-box"></div>
</td>
<td>08:00</td>
<td>13:00</td>
<td>Tag 1</td>
<td>Category 1</td>
</tr>
<tr data-time="09:00" data-stop-time="15:00" data-tag-name="test2" data-category="cat2" data-key="34096" class="low">
<td>
<div className="red-box"></div>
</td>
<td>09:00</td>
<td>15:00</td>
<td>Tag 2</td>
<td>Category 2</td>
</tr>
<tr data-time="03:00" data-stop-time="17:00" data-tag-name="test3" data-category="cat3" data-key="34095" class="low">
<td>
<div className="red-box"></div>
</td>
<td>03:00</td>
<td>17:00</td>
<td>Tag 3</td>
<td>Category 3</td>
</tr>
<tr data-time="06:00" data-stop-time="17:20" data-tag-name="test4" data-category="cat4" data-key="34094" class="low">
<td>
<div className="red-box"></div>
</td>
<td>06:00</td>
<td>17:20</td>
<td>Tag 4</td>
<td>Category 4</td>
</tr>
</tbody>
</table>
The code below is executed using server push:
$('tr[name=' + device + ']').find("td[id='status']").text('STARTED');
when I try to access the id of the element it gives proper result
$('tr[name=' + device + ']').find("td[id='status']").attr('id'); // works for me
but when I try to update the text using html or text it doesn't work.
HTML:
<table class="table table-bordered table-condensed cf">
<thead class="cf">
<tr>
.........
................
</tr>
</thead>
<tbody>
<tr id="car0" name="5" class="redRow">
<td>.....</td>
<td>.....</td>
<td>.....</td>
<td>......</td>
<td id="5status">......</td>
<td>.....</td>
<td>.....</td>
<td>........</td>
</tr>
<tr id="car2" name="8" class="redRow">
<td> ....</td>
<td>......</td>
<td>......</td>
<td>......</td>
<td id="6status">0 km/h</td>
<td>........</td>
<td>..........</td>
<td>..........</td>
</tr>
</tbody>
</table>
I even tried $('#6status').text('STARTED'); but doesn't work.
Your td element have numbers before substring status.
So use selector to get element contains substring status.
Read more about this selector here
Solution:
$('tr[name=' + device + ']').find("td[id*='status']").text('STARTED');
Example:
$(function() {
var device = '8';
$('tr[name=' + device + ']').find("td[id*='status']").text('STARTED');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-condensed cf">
<thead class="cf">
<tr>
.........
................
</tr>
</thead>
<tbody>
<tr id="car0" name="5" class="redRow">
<td>.....</td>
<td>.....</td>
<td>.....</td>
<td>......</td>
<td id="5status">......</td>
<td>.....</td>
<td>.....</td>
<td>........</td>
</tr>
<tr id="car2" name="8" class="redRow">
<td> ....</td>
<td>......</td>
<td>......</td>
<td>......</td>
<td id="6status">0 km/h</td>
<td>........</td>
<td>..........</td>
<td>..........</td>
</tr>
</tbody>
</table>
I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.
Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/