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

Question

我有一个由用户输入填充的表。例如，有名字和姓氏的文本输入。 John 在一个输入中，Smith 在下一个输入中，将在 Name 列下的表格中添加 John Smith，一个包含 2 个值的字符串。这与 Address 列一起正常工作......但是从表中获取值到输入是问题所在。单击相应的行填充输入，但我需要拆分这些值以填充正确的输入(例如，John Smith 再次拆分为名字和姓氏)。有任何想法吗？提前致谢。

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

我建议您将数据行元素包装在具有相应类名的 span 中。名字和姓氏的示例，

js

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

fiddle 的 html

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

然后检索独立于其文本格式的值将是直接明了的。

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

在 fiddle 中，您还可以找到将点击功能逻辑关联到新添加的行以便可以选择它们的代码。

$('#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());

    });

为了让您的代码保持干燥，最好将点击功能逻辑放在一个函数中并直接调用它，而不是复制代码。