將表中的值拆分爲不同的文本輸入？

我有一個由用戶輸入填充的表格。例如，有名字和姓氏的文本輸入。約翰在一個輸入中，而在下一個輸入史密斯時，將在名稱列下添加表格作爲約翰史密斯，一個包含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()); 
});

來源

2013-10-25 triplethreat77

我建議你用相應的數據包裝你的數據行元素認爲類名。例如，對於名字和姓氏給出

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

HTML小提琴的

<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()); 

    });

爲了保持你的代碼幹，最好放置點擊功能邏輯函數中，直接調用，而不是複製的代碼。

來源

2013-10-25 17:11:54 melc

很好，謝謝。 – triplethreat77

如果你是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/

來源

2013-10-25 16:59:12

那麼地址列的實例呢？有公司名稱，
和地址。另外，我注意到新行不能被點擊/突出顯示，所以我看不到填充的輸入。 – triplethreat77

@ triplethreat77編輯我的答案。 –

你可以做一個簡單的變化：

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

但是，只有當你確定的姓和名被恆定空格隔開，否則你將不得不多改一點...

來源

2013-10-25 17:01:56 DarkAjax

地址列的實例呢？有公司名稱，
和地址。 – triplethreat77

將表中的值拆分爲不同的文本輸入？

回答

相關問題