将表中的值拆分为不同的文本输入？

Question

I have a table that is populated by user input. For example, there is a text input for First Name, and Last Name. John in one input and Smith in the next, will add the the table under the Name column as John Smith, one string of 2 values. This is working correctly, along with the Address column... but getting the values FROM the table TO the inputs is the issue. Clicking the corresponding row populates the inputs, but I need to split these values to populate the correct inputs (so that John Smith is split up again to first and last name for example). Any ideas? Thanks in advance.

http://jsfiddle.net/Z85QC/6/

jQuery

/* Add a click handler to the rows - this could be used as a callback */
$("#example tbody tr").click(function (e) {
    if ($(this).hasClass('rowSelected')) {
        $(this).removeClass('rowSelected');
    } else {
        oTable.$('tr.rowSelected').removeClass('rowSelected');
        $(this).addClass('rowSelected');
    }

    var properties; // all td from .row_selected         

    properties = fnGetSelected(oTable).find("td");
    $("#fName").val(properties.eq(0).text());
    $("#email").val(properties.eq(1).text());
    $("#company").val(properties.eq(2).text());
});

Answer 1

I advise you to wrap your data row elements in span with corresponding class names. Example given for first name and last name,

js

$('#addRow').click(function () {
    var row =$('#example').dataTable().fnAddData([
    '<span class="fname">'+$("#fName").val()+'</span>&nbsp;<span class="lname">' + $("#lName").val()+'</span>',
    $("#email").val(),

html of the fiddle

<td><span class='fname'>John</span>&nbsp;<span class='lname'>Smith</span></td>

Then it is straighforward and clear to retrieve the values independent from their textual format.

http://jsfiddle.net/Z85QC/10/

In the fiddle you will also find code for associating click function logic to new added rows so that they can be selected.

$('#addRow').click(function () {
    var row =$('#example').dataTable().fnAddData([
    '<span class="fname">'+$("#fName").val()+'</span>&nbsp;<span class="lname">' + $("#lName").val()+'</span>',
    $("#email").val(),
    $("#company").val() + '<br>' + $('#address').val()]);
        $(oTable.fnGetNodes(row)).click( function( e ) {

    if ($(this).hasClass('rowSelected')) {
        $(this).removeClass('rowSelected');
    } else {
        oTable.$('tr.rowSelected').removeClass('rowSelected');
        $(this).addClass('rowSelected');
    }

    var properties; // all td from .row_selected         

    properties = fnGetSelected(oTable).find("td");
    $("#fName").val(properties.eq(0).find('.fname').text());

            $("#lName").val(properties.eq(0).find('.lname').text());
    $("#email").val(properties.eq(1).text());
    $("#company").val(properties.eq(2).text());

    });

In order to keep your code DRY it is best to place the click function logic inside a function and call that directly, instead of copying the code.

Answer 2

If you are 100% sure that the last name and first name are seperated by a space, you can use this code :

$("#fName").val(properties.eq(0).text().split(' ')[0]);
$("#lName").val(properties.eq(0).text().split(' ')[1]);

For address :

$("#company").val(properties.eq(2).html().split('<br>')[0].trim());
$("#address").val(properties.eq(2).html().split('<br>').splice(1).join('\n').trim());

Fiddle : http://jsfiddle.net/Z85QC/11/

Answer 3

You can do a simple change like:

var properties; // all td from .row_selected         

properties = fnGetSelected(oTable).find("td");
var names = properties.eq(0).text().split(' ');
$("#fName").val(names[0]);
$("#lName").val(names[1]);
$("#email").val(properties.eq(1).text());
$("#company").val(properties.eq(2).text());

JSFiddle Demo

But only if you're sure the First and Last name are separated by a constant single space, otherwise you'd have to change it a little bit more...