1

ユーザー入力によって入力されるテーブルがあります。たとえば、名と姓のテキスト入力があります。1 つの入力で John を入力し、次の入力で Smith を入力すると、[名前] 列の下に表が John Smith として追加され、2 つの値の 1 つの文字列になります。これは 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());
});
4

3 に答える 3

2

データ行要素を対応するクラス名でスパンでラップすることをお勧めします。名と姓の例

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

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

    });

コードを DRY に保つには、コードをコピーするのではなく、クリック関数のロジックを関数内に配置し、それを直接呼び出すことをお勧めします。

于 2013-10-25T17:11:54.570 に答える
1

姓と名がスペースで区切られていることが 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-25T16:59:12.170 に答える
0

次のような簡単な変更を行うことができます。

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-25T17:01:56.423 に答える