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

Split values from table into different text inputs?

本文关键字：文本 输入 拆分      更新时间：2023-09-26

我有一个由用户输入填充的表。例如，有一个用于"名字"和"姓氏"的文本输入。一个输入中的 John 和下一个输入中的 Smith，将在"名称"列下将表添加为 John Smith，一个包含 2 个值的字符串。这与地址列一起正常工作...但是从表中获取值到输入是问题所在。单击相应的行会填充输入，但我需要拆分这些值以填充正确的输入（例如，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());
});

我建议您使用相应的类名将数据行元素包装在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(),

小提琴的网页

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

然后，检索独立于其文本格式的值是清晰而清晰的。

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

在小提琴中，您还将找到用于将单击函数逻辑与新添加的行相关联的代码，以便可以选择它们。

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

为了使代码保持干燥，最好将单击函数逻辑放在函数中并直接调用它，而不是复制代码。

如果您 100% 确定姓氏和名字用空格分隔，则可以使用以下代码：

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

地址 ：

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

小提琴 ： http://jsfiddle.net/Z85QC/11/

您可以执行简单的更改，例如：

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

但前提是您确定名字和姓氏由一个恒定的单个空格分隔，否则您将不得不对其进行更多更改......

相关文章：