Develop Reference

Cloning row that uses RadioButtonFor

I have a row that looks like this
#for (int i = 0; i < item.IHP.Count; i++)
{
Part part = db.Parts.Find(Model.Parts[i].ID);
#Html.HiddenFor(x => x.Parts[i].ID)
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
#Html.DisplayFor(x => x.Parts[i].MFGNumber)
#Html.HiddenFor(x => x.Parts[i].MFGNumber)
</td>
<td>
#Html.DisplayFor(x => x.Parts[i].PartName)
#Html.HiddenFor(x => x.Parts[i].PartName)
</td>
<td style="font-weight:bold">
#Html.DisplayFor(x => x.Parts[i].QtyInItem)
#Html.HiddenFor(x => x.Parts[i].QtyInItem)
</td>
<td>
<input type="checkbox" id="all#(part.ID)" class="part-class" data-partId="#(part.ID)" checked>
</td>
#foreach (var actionType in partActionTypes)
{
<td>
#Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType)
</td>
}
</tr>
}
And here is my Jquery Code
$(document).ready(function () {
$('.tr_clone input.part-class').change(function () {
let Id = $(this).attr('id');
let partId = $(this).attr('data-partId');
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('td');
$tr.after($clone);
$($clone).find(".part-class").hide();
});
});
Currently, when the row is cloned it puts both rows into one big radio group. How can I make it so that they are in separate radio groups?

How to clone selected Table Rows and Hide original table Row Using JQuery

I want to clone selected (:checked) Table Rows and Hide original Row's Using JQuery . I want to add delete Functionality in cloned table and remove checkboxes from cloned table heads..
here is my code for clone:
function getAddDetails(){
var srcrow = $('.content_value').has('input:checked');
var lastRow = srcrow.clone();
lastRow.each(function(index, row){
$(row).find('checked').each(function(idx, el){
var el = $(el);
el.val(srcrow.eq(index).find('select').eq(idx).val())
});
});
$(".content_head").each(function(i, el) {
$(this).closest('.content_head').clone().insertAfter(".content_value:last");
});
$('.content_value').has('input:checked').hide();
var cloned =lastRow.closest('.content_value').clone().insertAfter(".content_head:last");
}
this is HTML code:
<tr class="content_head">
<td class="tableheader"><input type="checkbox" name="select-all" id="select-all" /></td>
<td class="tableheader">ID</td>
<td class="tableheader">Name</td>
<td class="tableheader">Type</td>
</tr>
<% #content.each do |f| %>
<tr class="content_value">
<td bgcolor="#FBFBFB">
<input type="checkbox" name="checkbox" id="chk" />
</td>
<td bgcolor="#FBFBFB">
<%= f.id %>
</td>
<td bgcolor="#FBFBFB">
<%= f.name %>
</td>
<td bgcolor="#FBFBFB">
<%= f.type %>
</td>
</tr>
<% end %>
<tr>
<td> </td>
<td><input type="button" id="button" value="add" onclick="getAddDetails();" class="submit_btn" /></td>
</tr>
Please Suggest.

Try this
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
function getAddDetails(){
var srcrow = $('.content_value').has('input:checked');
var lastRow = srcrow.clone();
lastRow.each(function(index, row){
$(row).find('checked').each(function(idx, el){
var el = $(el);
el.val(srcrow.eq(index).find('select').eq(idx).val())
});
});
$(".conten
t_head").each(function(i, el) {
$(this).closest('.content_head').clone().removeClass('content_head').addClass('clone_content_head').insertBefore(".content_value:first");
});
//$('.content_value:last').append(lastRow);
var cloned =lastRow.closest('.content_value').clone().removeClass('content_value').addClass('clone_content_value').insertAfter(".clone_content_head:last");
$(':checkbox').each(function() {
this.checked = false;
});
$('.content_value').remove();
$('.content_head').remove();
// $('.del').live('click',function(){
// $(this).parent().parent().remove();
// });
}
</script>

Javascript check boxes based on text in rows

I am trying to convert this: Select table row and check checkbox using JQuery
into normal javascript, since I'm in a situation where I cannot use jquery.
Here is the orignal
$("table tr").each(function () {
if ($(this).find("td:eq(1)").text().trim() == '2013-03-21') {
$(this).find("input[type=checkbox]").attr("checked", true);
}
});
This is what I have so far, and I'm sure its way off:
var elements = [].slice.call(document.querySelectorAll("table tr"));
Array.prototype.forEach(elements, function(){
var tdText = this.querySelectorAll("td").textContent
if (tdText == '2013-03-21') {
this.querySelectorAll("input[type=checkbox]").setAttribute("checked", true);
}
});
This is the original table:
<table>
<tr>
<td>Record1</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record2</td>
<td>2013-03-22</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record3</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>

querySelectorAll() returns a nodeList of elements.
You need to iterate those and deal with each instance or use the index you want like:
element.querySelectorAll("td")[0]

The code var tdText = this.querySelectorAll("td").textContent will return an undefined textContent because you are referring to the tr's NodeList. You can loop through it and then you can get the td's content:
let rows = Array.prototype.slice.call(document.querySelectorAll('table tr'));
let textDate = '2013-03-21';
rows.map((row) => {
let cells = Array.prototype.slice.call(row.querySelectorAll('td'));
for (let i = 0, length = cells.length; i < length; i++) {
if (cells[i].textContent === textDate) {
let cb = row.querySelectorAll('input[type=checkbox]');
cb[0].checked = true;
return;
}
}
});

Use ElemCollection.forEach.call instead of using Array#slice.call as HTMLCollection does not have forEach method
Use [1] index while selecting text from td element
this in Array#forEach does not refer to element, use first argument of Array#forEach callback function which is item of array
Array.prototype.forEach.call(document.querySelectorAll("table tr"), function(elem) {
var tdText = elem.querySelectorAll("td")[1].textContent;
if (tdText === '2013-03-21') {
elem.querySelector("input[type=checkbox]").setAttribute("checked", true);
}
});
<table>
<tr>
<td>Record1</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record2</td>
<td>2013-03-22</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record3</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>

Iterating through table and get the value of a button in each tablerow jQuery

I have buttons in a table which are created dynamically. I want to iterate through a table, get the tablerows which contain a checked checkbox and get the value of a button inside the tablerow. I want to push the values in an array after. The buttons don't have a unique ID so I cannot get their values by id.
I tried to get the values through giving the buttons a class and itering works fine but the array is filled with empty entries.
$("#bt_multiple_deletion").off().on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).find(".filefolder-button").text());
});
})
I really don't know what Im doing wrong. I tried to get the values with .text(), .val() etc.
My table row looks like this:
<tr class="select">
<td>
<span class="countEntries"><input id="lv_fifo_ctrl7_cb_delete_file" type="checkbox" name="lv_fifo$ctrl7$cb_delete_file" /></span>
</td>
<td>
<img src="images/icons/013_document_02_rgb.png" alt="document" />
</td>
<td class="name">//the button i want to get the value from
<input type="submit" name="lv_fifo$ctrl7$bt_file" value="013_document_png.zip" id="lv_fifo_ctrl7_bt_file" class="filefolder-button download file del" style="vertical-align: central" />
</td>
<td>
<span id="lv_fifo_ctrl7_lb_length">33.14 KB</span>
</td>
<td>
<span id="lv_fifo_ctrl7_lb_CreationTime">21.10.2014 07:34:46</span>
</td>
<td></td>
<td>
<input type="submit" name="lv_fifo$ctrl7$bt_del_file" value="delete" id="lv_fifo_ctrl7_bt_del_file" class="delete-button delete-file" />
</td>
</tr>

The problem is rows is the input elements not the tr elements so in the loop you need to find the tr which contains the input then find the target element inside it
$("#bt_multiple_deletion").off().on("click", function () {
var checked = $(".select").find("input[type=checkbox]:checked");
var files = checked.map(function () {
return $(this).closest('tr').find(".filefolder-button").val();
}).get();
})
Another option is
$("#bt_multiple_deletion").off().on("click", function () {
var rows = $(".select").find("tr").has('input[type=checkbox]:checked');
//var rows = $(".select").find('input[type=checkbox]:checked').closest('tr');
var files = rows.map(function () {
return $(this).find(".filefolder-button").val();
}).get();
})

#Timo Jokinen Do you need this
$("#bt_multiple_deletion").on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).parents("tr").find("td.filefolder-button").text());
});
console.log(files);
})
<table class="select">
<tr>
<td class="filefolder-button">test1</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test2</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<button id="bt_multiple_deletion">delete</button>
Checkout example link here

Edit inline in table in index view

I use the following code to display the table rows
for every row there is edit and delete button ,what i want to do is
when I click on edit for specific row change the row from display only
to editable row (instead of navigating to other page for edit),how should I do that?
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.name)
</th>
<th>
#Html.DisplayNameFor(model => model.checkBox1)
</th>
<th></th>
</tr>
<tbody id="data-table">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</tbody>
This is how the table look like
Ive try to change the code to something like this but I got following errors:
<tbody id="data-table">
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
if (Model[i].Id == ViewBag.SelectedID)
{
<td>
#Html.EditorFor(model=> model[i].name)
</td>
<td>
#Html.EditorFor(m=> m[i].checkBox1)
</td>
<td>
<button type="submit" name="submit" value="save">Save</button>
<button type="submit" name="submit" value="cancel">Cancel</button>
</td>
}
}
else
{
<td>
#Html.DisplayFor(m => m[i].name)
</td>
<td>
#Html.DisplayFor(m=> m[i].checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }) |
#Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</td>
}
</tr>
}
The error is in statments:
#Html.EditorFor(m => m[i].name) and
#Html.EditorFor(m=> m[i]checkBox1)
try specifing the arguments explicitly,any idea?

Try with the following code
Below function make row editable
var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
nCurrentEdit = $(this).attr("id");
var oTR = $(this).parents("tr").first();
var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
oTR.find("td:nth-child(1)").html(sText);
oTR.find(":disabled").prop("disabled", false);
if (oTR.find("#btnsubmit").length == 0)
oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");
oTR.find("td:last a").hide();
event.preventDefault();
});
Following function update the record and convert the row normal from editable mode.
$('#data-table').on('click', '#btnUpdate', function () {
var postData = {
id : nCurrentEdit,
name: $("#name").val(),
checkBox1: $("#checkBox1").val(),
checkBox2: $("#checkBox2").val(),
checkBox3: $("#checkBox3").val()
};
$.post('#Url.Action("AjaxEdit", "Roles")', postData, null);
var sNewText = $(this).parents("tr").first().find("td:first input").val();
$(this).parents("tr").first().find("td:first").append(sNewText);
$(this).parents("tr").first().find("td:first input").remove();
$(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);
$(this).parent().find("a").show();
$(this).hide();
});

You could maybe use jEditable http://www.appelsiini.net/projects/jeditable and intagrate it with your table.
Maybe you can use DataTables too with jEditable if it's fits your project, something like http://datatables.net/release-datatables/examples/server_side/editable.html