javascript - Search dynamically created HTML table for checked boxes -
i have 2-dimensional javascript array dynamically creating html table. each row has 3 checkboxes; "deny", "approve" , "more info". goal have user make checkbox selections , click button , have different tasks performed depending on checkboxes selected.
here code create table. data coming mysql db:
function load() { $.post( "returnsmedb.php", function(response) { var block = [] (var item in response) { var objectitem = response[item]; var firstname = objectitem.fname; var lastname = objectitem.lname; var username = objectitem.uname; var email = objectitem.email; var password = objectitem.password; var deny = document.createelement("input"); deny.type = "checkbox"; deny.class = "chk"; deny.name = "deny"; var approve = document.createelement("input"); approve.type = "checkbox"; approve.class = "chk"; approve.name = "approve"; var moreinfo = document.createelement("input"); moreinfo.type = "checkbox"; moreinfo.class = "chk"; moreinfo.name = "moreinfo"; block.push(firstname); block.push(lastname); block.push(username); block.push(email); block.push(password); block.push(deny); block.push(approve); block.push(moreinfo); dataset.push(block); block = []; } var data = [" first name", " last name ", " user name ", " email ", " deny", "approve", "more information"] tablearea = document.getelementbyid('userstable'); table = document.createelement('table'); thead = document.createelement('thead'); tr = document.createelement('tr'); (var = 0; < data.length; i++) { var headertxt = document.createtextnode(data[i]); th = document.createelement('th'); th.appendchild(headertxt); tr.appendchild(th); thead.appendchild(tr); } table.appendchild(thead); (var = 0; < dataset.length; i++) { tr = document.createelement('tr'); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); //added checkbox tr.appendchild(document.createelement('td')); //added checkbox tr.appendchild(document.createelement('td')); //added checkbox // var checkbox = document.createelement("input"); //added checkbox // checkbox.type = "checkbox"; //added checkbox tr.cells[0].appendchild(document.createtextnode(dataset[i][0])); tr.cells[1].appendchild(document.createtextnode(dataset[i][1])); tr.cells[2].appendchild(document.createtextnode(dataset[i][2])); tr.cells[3].appendchild(document.createtextnode(dataset[i][3])); tr.cells[4].appendchild((dataset[i][5])); //added checkbox tr.cells[5].appendchild((dataset[i][6])); //added checkbox tr.cells[6].appendchild((dataset[i][7])); //added checkbox table.appendchild(tr); $('input.chk').on('change', function() { $('input.chk').not(this).prop('checked', false); }); } tablearea.appendchild(table); // console.log(dataset); }, 'json' ); } the table has been working fine. currently, able loop through table , convert data json object. thinking, if, example, "deny" selected on couple rows, put specific rows in object , send them specific database. here working on.
function submit() { tablearray = []; $("#submit").click(function() { alert("value: " + $("#deny").val()); }); // $('#submit').click(function () { //$('#userstable').find('input[type="checkbox"]:checked').each(function () { // $(this) = tablearray; // console.log(tablearray); // }); // }); $('#userstable tr').each(function(row, tr) { tabledata = tabledata + $(tr).find('td:eq(0)').text() + ' ' + $(tr).find('td:eq(1)').text() + ' ' + $(tr).find('td:eq(2)').text() + ' ' + $(tr).find('td:eq(3)').text() + ' ' + $(tr).find('td:eq(4)').text() + ' ' + $(tr).find('td:eq(5)').text() + ' ' + $(tr).find('td:eq(6)').text() + ' ' + '\n'; }); var tabledata = new array(); $('#userstable tr').each(function(row, tr) { if ($('#deny').prop('checked')) { tabledata[row] = { "fname": $(tr).find('td:eq(0)').text(), "lname": $(tr).find('td:eq(1)').text(), "uname": $(tr).find('td:eq(2)').text(), "email": $(tr).find('td:eq(3)').text(), "deny": $(tr).find('td:eq(4)').text(), "approve": $(tr).find('td:eq(5)').text(), "info": $(tr).find('td:eq(6)').text() } } }); tabledata.shift(); console.log(tabledata) } any / advice appreciated!
first fix code, replace
xxxx.class => xxxx.classname xxx.name => xxxx.name then value replace
if ($('#deny').prop('checked')) { with
if ($(tr).find('input[name=deny]').prop('checked')) { because deny not id input name
try it
var response = [{ "fname": "nathanial", "lname": "bohlje", "uname": "nbohlje0", "email": "nbohlje0@hud.gov", "password": "jnsx8r" }, { "fname": "nadeen", "lname": "pollock", "uname": "npollock1", "email": "npollock1@cornell.edu", "password": "loqcxbhcc" }, { "fname": "herby", "lname": "brisco", "uname": "hbrisco2", "email": "hbrisco2@who.int", "password": "s6gaztfi" }, { "fname": "ashil", "lname": "asquith", "uname": "aasquith3", "email": "aasquith3@nsw.gov.au", "password": "66zu1bk" }, { "fname": "lucian", "lname": "neighbour", "uname": "lneighbour4", "email": "lneighbour4@theatlantic.com", "password": "hbntuvt4gohz" }, { "fname": "cortie", "lname": "botger", "uname": "cbotger5", "email": "cbotger5@npr.org", "password": "kprpu2tl6" }, { "fname": "sella", "lname": "dufton", "uname": "sdufton6", "email": "sdufton6@taobao.com", "password": "jd8yzw0zkq" }, { "fname": "latrena", "lname": "di bartolommeo", "uname": "ldibartolommeo7", "email": "ldibartolommeo7@reddit.com", "password": "xjhuwyxrc96k" }, { "fname": "vi", "lname": "smy", "uname": "vsmy8", "email": "vsmy8@mac.com", "password": "cpyorwr0cwa" }, { "fname": "owen", "lname": "klulicek", "uname": "oklulicek9", "email": "oklulicek9@typepad.com", "password": "ouxt3no8" }]; var block = [] var dataset = [] for(var item in response) { var objectitem = response[item]; var firstname = objectitem.fname; var lastname = objectitem.lname; var username = objectitem.uname; var email = objectitem.email; var password = objectitem.password; var deny = document.createelement("input"); deny.type = "checkbox"; deny.classname = "chk"; deny.name = "deny"; var approve = document.createelement("input"); approve.type = "checkbox"; approve.classname = "chk"; approve.name = "approve"; var moreinfo = document.createelement("input"); moreinfo.type = "checkbox"; moreinfo.classname = "chk"; moreinfo.name = "moreinfo"; block.push(firstname); block.push(lastname); block.push(username); block.push(email); block.push(password); block.push(deny); block.push(approve); block.push(moreinfo); dataset.push(block); block = []; } var data = [" first name", " last name ", " user name ", " email ", " deny", "approve", "more information"] tablearea = document.getelementbyid('userstable'); table = document.createelement('table'); thead = document.createelement('thead'); tr = document.createelement('tr'); for(var = 0; < data.length; i++) { var headertxt = document.createtextnode(data[i]); th = document.createelement('th'); th.appendchild(headertxt); tr.appendchild(th); thead.appendchild(tr); } table.appendchild(thead); for(var = 0; < dataset.length; i++) { tr = document.createelement('tr'); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); tr.appendchild(document.createelement('td')); //added checkbox tr.appendchild(document.createelement('td')); //added checkbox tr.appendchild(document.createelement('td')); //added checkbox // var checkbox = document.createelement("input"); //added checkbox // checkbox.type = "checkbox"; //added checkbox tr.cells[0].appendchild(document.createtextnode(dataset[i][0])); tr.cells[1].appendchild(document.createtextnode(dataset[i][1])); tr.cells[2].appendchild(document.createtextnode(dataset[i][2])); tr.cells[3].appendchild(document.createtextnode(dataset[i][3])); tr.cells[4].appendchild((dataset[i][5])); //added checkbox tr.cells[5].appendchild((dataset[i][6])); //added checkbox tr.cells[6].appendchild((dataset[i][7])); //added checkbox table.appendchild(tr); $('input.chk').on('change', function() { $('input.chk').not(this).prop('checked', false); }); } tablearea.appendchild(table); // console.log(dataset); function submit() { tablearray = []; $("#submit").click(function() { alert("value: " + $("#deny").val()); }); // $('#submit').click(function () { //$('#userstable').find('input[type="checkbox"]:checked').each(function () { // $(this) = tablearray; // console.log(tablearray); // }); // }); $('#userstable tr').each(function(row, tr) { tabledata = tabledata + $(tr).find('td:eq(0)').text() + ' ' + $(tr).find('td:eq(1)').text() + ' ' + $(tr).find('td:eq(2)').text() + ' ' + $(tr).find('td:eq(3)').text() + ' ' + $(tr).find('td:eq(4)').text() + ' ' + $(tr).find('td:eq(5)').text() + ' ' + $(tr).find('td:eq(6)').text() + ' ' + '\n'; }); var tabledata = new array(); $('#userstable tr').each(function(row, tr) { if ($(tr).find('input[name=deny]').prop('checked')) { tabledata[row] = { "fname": $(tr).find('td:eq(0)').text(), "lname": $(tr).find('td:eq(1)').text(), "uname": $(tr).find('td:eq(2)').text(), "email": $(tr).find('td:eq(3)').text(), "deny": $(tr).find('td:eq(4)').text(), "approve": $(tr).find('td:eq(5)').text(), "info": $(tr).find('td:eq(6)').text() } } }); tabledata.shift(); console.log(tabledata) }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="button" id="check" value="check" onclick="submit()"> <div id="userstable"></div>
Comments
Post a Comment